實(shí)現(xiàn)Vue的markdown文檔可以在線運(yù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á)到減小項(xiàng)目體積的目的。
首先，安裝 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文本字符串(具體要求請(qǐng)看下面的“markdownTxt 寫法要求”) |
| :scope | 非(Object) | 無 | markdown文本中，引入的組件，如果不想全局引入，可以局部引入，用法請(qǐng)看上面的DEMO |
| highlight-style-file-name | 非(String) | 'github' | markdown代碼部分樣式文件名，此處是指定引入那種樣式（css）文件 詳細(xì)請(qǐng)參考：https://highlightjs.org/stati... 中Styles |
| :runClass | 非(String) | 無 | Vue運(yùn)行代碼處的css樣式名稱 |
| :runStyle | 非(Object) | 無 | Vue運(yùn)行代碼處的行間樣式名稱 |
| @error | 非(Function) | 無 | 當(dāng)前組件執(zhí)行失敗的回調(diào)函數(shù) |
markdownTxt 寫法要求
代碼中必須指定哪個(gè)組件是需要執(zhí)行的，在上面寫上 vue-run , 否則認(rèn)為是普通文本，不予執(zhí)行。
vue-run 放在語言類型后面，需要空格，例如：
```html vue-run
<template>
<div @click="go">Hello, {{name}}! 你可以點(diǎn)擊試試</div>
</template>
<script>
export default {
data() {
return {
name: 'Vue'
}
},
methods: {
go () {
alert('點(diǎn)擊彈出， 代碼vue已執(zhí)行');
}
}
}
</script>
<style>
div{
background-color: red;
}
</style>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn)
在使用Vue框架開發(fā)Web應(yīng)用時(shí),倒計(jì)時(shí)功能是一個(gè)常見的需求,它可以在一定時(shí)間內(nèi)重復(fù)執(zhí)行某些操作,比如防止用戶重復(fù)提交表單、限制投票次數(shù)、實(shí)現(xiàn)驗(yàn)證碼獲取等功能,所以本文給大家介紹了Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn),需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
JS 實(shí)現(xiàn)獲取對(duì)象屬性個(gè)數(shù)的方法小結(jié)
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取對(duì)象屬性個(gè)數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了JS 獲取對(duì)象屬性個(gè)數(shù)的三種常用方法,需要的朋友可以參考下2023-05-05
如何使用 vxe-table 實(shí)現(xiàn)左邊是樹右邊是表格聯(lián)動(dòng)功能
使用 vxe-table 來實(shí)現(xiàn)左邊是樹,右邊是表格聯(lián)動(dòng)功能,當(dāng)需要實(shí)現(xiàn)左右兩側(cè)聯(lián)動(dòng)時(shí),表格 vxe-grid 配合分割模板 vxe-split 就很容易實(shí)現(xiàn)了,下面通過實(shí)例代碼給大家介紹使用 vxe-table 來實(shí)現(xiàn)左邊是樹,右邊是表格聯(lián)動(dòng)功能,感興趣的朋友一起看看吧2025-03-03
Vue2.0+ElementUI實(shí)現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個(gè)通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
在網(wǎng)上找了好久關(guān)于左右過渡動(dòng)畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個(gè),分享給大家,感興趣的朋友參考下吧2023-11-11
vue Treeselect下拉樹只能選擇第N級(jí)元素實(shí)現(xiàn)代碼
這篇文章主要介紹了vue Treeselect下拉樹只能選擇第N級(jí)元素實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08