使用Vue怎么在線運行markdown文檔

使用Vue怎么在線運行markdown文檔？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

安裝

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"
   }
  ]
 ]
}

接下來，如果你只需引入部分組件，寫入以下內(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ù)說明

markdownTxt 寫法要求

代碼中必須指定哪個組件是需要執(zhí)行的，在上面寫上 vue-run , 否則認為是普通文本，不予執(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)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。