markdown 文档中Vue代码 可执行啦,而且可以边看边执行。这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行。

Github

https://github.com/zhangKunUserGit/vue-markdown-run

DEMO

https://zhangkunusergit.github.io/vue-markdown-run/dist/

安装

npm install vue-markdown-run --save

用法

(1)完整引入

// 引入
import MarkdownRun from 'vue-markdown-run';
// 全局注入
Vue.use(MarkdownRun);

(2)按需引入

借助 babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -save-dev

然后,将 .babelrc 修改为:

{
 "plugins": [
  [
   "component",
   {
    "libraryName": "vue-markdown-run",
    "styleLibraryName": "theme"
   }
  ]
 ]
}

接下来,如果你只需引入部分组件,写入以下内容:

import { MarkdownRun } from 'vue-markdown-run';

export default {
 components: {
  MarkdownRun
 }
}

组件的用法

 <markdown-run
  :mark="markdownTxt"
  highlight-style-file-name="github"
  :runClass=""
  :runStyle=""
  @error=""
 />

参数说明

参数 值 默认值 说明 :mark 必传(String) 无 markdown文本字符串(具体要求请看下面的“markdownTxt 写法要求”) :scope 非(Object) 无 markdown文本中,引入的组件,如果不想全局引入,可以局部引入,用法请看上面的DEMO highlight-style-file-name 非(String) 'github' markdown代码部分样式文件名,此处是指定引入那种样式(css)文件 详细请参考:https://highlightjs.org/stati... 中Styles :runClass 非(String) 无 Vue运行代码处的css样式名称 :runStyle 非(Object) 无 Vue运行代码处的行间样式名称 @error 非(Function) 无 当前组件执行失败的回调函数

markdownTxt 写法要求

代码中必须指定哪个组件是需要执行的,在上面写上 vue-run , 否则认为是普通文本,不予执行。

vue-run 放在语言类型后面,需要空格,例如:

```html vue-run
<template>
 <div @click="go">Hello, {{name}}! 你可以点击试试</div>
</template>

<script>
 export default {
  data() {
   return {
    name: 'Vue'
   }
  },
 methods: {
   go () {
    alert('点击弹出, 代码vue已执行');
   }
  }
 }
</script>
<style>
 div{
 background-color: red;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
Vue,markdown,文档在线运行,Vue,文档在线运行

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。