實現(xiàn)Vue的markdown文檔可以在線運行的方法示例

更新時間：2018年12月11日 08:08:09 作者：zhanglearning

這篇文章主要介紹了實現(xiàn)Vue的markdown文檔可以在線運行的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

markdown 文檔中Vue代碼可執(zhí)行啦，而且可以邊看邊執(zhí)行。這樣就可以用markdown文檔的形式，寫自己的Vue博客了，可以方便介紹自己的原創(chuàng)組件，很酷的執(zhí)行。

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 ，我們可以只引入需要的組件，以達(dá)到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -save-dev

然后，將 .babelrc 修改為：

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

接下來，如果你只需引入部分組件，寫入以下內(nèi)容：

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

export default {
 components: {
  MarkdownRun
 }
}

組件的用法

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

參數(shù)說明

參數(shù)	值	默認(rèn)值	說明
:mark	必傳(String)	無	markdown文本字符串(具體要求請看下面的“markdownTxt 寫法要求”)
:scope	非(Object)	無	markdown文本中，引入的組件，如果不想全局引入，可以局部引入，用法請看上面的DEMO
highlight-style-file-name	非(String)	'github'	markdown代碼部分樣式文件名，此處是指定引入那種樣式（css）文件詳細(xì)請參考：https://highlightjs.org/stati... 中Styles
:runClass	非(String)	無	Vue運行代碼處的css樣式名稱
:runStyle	非(Object)	無	Vue運行代碼處的行間樣式名稱
@error	非(Function)	無	當(dāng)前組件執(zhí)行失敗的回調(diào)函數(shù)

markdownTxt 寫法要求

代碼中必須指定哪個組件是需要執(zhí)行的，在上面寫上 vue-run , 否則認(rèn)為是普通文本，不予執(zhí)行。

vue-run 放在語言類型后面，需要空格，例如：

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

<script>
 export default {
  data() {
   return {
    name: 'Vue'
   }
  },
 methods: {
   go () {
    alert('點擊彈出， 代碼vue已執(zhí)行');
   }
  }
 }
</script>
<style>
 div{
 background-color: red;
 }
</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: