利记体育app下载利记体育app下载


利记

实现Vue 的 markdown 文档可以在线运行

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

Github

https://github.com/zhangKunUs...

DEMO

https://zhangkunusergit.githu...

安装

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>

如有问题请联系

邮箱: 1766597067@qq.com
微信号: 18625531739

欢迎阅读本文章: 李生岩

利记sbobet平台

利记