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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
