實現(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3自定義hooks/可組合函數(shù)方式
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue修改Dom不生效的解決
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue3動態(tài)倒計時的代碼實現(xiàn)
在使用Vue框架開發(fā)Web應(yīng)用時,倒計時功能是一個常見的需求,它可以在一定時間內(nèi)重復(fù)執(zhí)行某些操作,比如防止用戶重復(fù)提交表單、限制投票次數(shù)、實現(xiàn)驗證碼獲取等功能,所以本文給大家介紹了Vue3動態(tài)倒計時的代碼實現(xiàn),需要的朋友可以參考下
2024-09-09
Vue實現(xiàn)列表跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue3中的ref和reactive定義數(shù)組方式
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
JS 實現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)
這篇文章主要介紹了JS 實現(xiàn)獲取對象屬性個數(shù)的方法,結(jié)合實例形式總結(jié)分析了JS 獲取對象屬性個數(shù)的三種常用方法,需要的朋友可以參考下
2023-05-05
如何使用 vxe-table 實現(xiàn)左邊是樹右邊是表格聯(lián)動功能
使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,當(dāng)需要實現(xiàn)左右兩側(cè)聯(lián)動時,表格 vxe-grid 配合分割模板 vxe-split 就很容易實現(xiàn)了,下面通過實例代碼給大家介紹使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,感興趣的朋友一起看看吧
2025-03-03
Vue2.0+ElementUI實現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧
2025-01-01
vue：左右過渡展開折疊的組件
在網(wǎng)上找了好久關(guān)于左右過渡動畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個,分享給大家,感興趣的朋友參考下吧
2023-11-11
vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼
這篇文章主要介紹了vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08