vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）詳解
癥結(jié)（懶癌患者）
在寫(xiě)組件庫(kù)文檔的時(shí)候，會(huì)把示例代碼粘貼到文檔里，這樣做有一個(gè)很惡心的地方：每次組件迭代或修改示例都需要重新修改文檔中的代碼片段。長(zhǎng)年累月，苦不堪言。
猜想（狂想曲）
所以我想，可不可以把.vue文件里的template塊和script塊取出來(lái)，放入對(duì)應(yīng)的.md文件中
比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替換示例中對(duì)應(yīng)的template|script塊
# xx
## 示例代碼
// {{:}} 定義變量規(guī)則模版（加個(gè)冒號(hào)防沖突）
{{:image.vue?type=template}} // 對(duì)應(yīng).vue 的template
{{:image.vue?type=script}} // 對(duì)應(yīng).vue 的template
{{:index.js}} // 對(duì)應(yīng)index.js
## 參數(shù)說(shuō)明
xxx...
output
# xx ## 示例代碼 // image.vue template <template> <div>xx</div> </template> // image.vue script <script> ... </script> // index.js var x = 1 ## 參數(shù)說(shuō)明 xxx...
動(dòng)手（能動(dòng)手絕不**）
要實(shí)現(xiàn)以上功能，需要探索以下幾點(diǎn)：
- 從.vue里取出template&script
- 塞進(jìn)對(duì)應(yīng)的.md的變量位置
- 將.md文件轉(zhuǎn)為Vue Componet / html
如果按照我們寫(xiě)js的習(xí)慣，以下嵌套排列可能更易讀
將.md文件轉(zhuǎn)為Vue Componet / html
找到變量位置，塞進(jìn)對(duì)應(yīng)的.md的指定位置
從.vue里取出template&script
一步一步來(lái)吧：
1、將.md文件轉(zhuǎn)為Vue Componet / html
要想在vue中使用.md文件為組件，只需要用loader將md轉(zhuǎn)成Vue Componet即可。
這個(gè)過(guò)程很簡(jiǎn)單,以下為loader偽代碼
const wrapper = content => `
<template>
<section v-html="content" v-once />
</template>
<script>
export default {
created() {
this.content = content
}
};
</script>
`
module.exports = function(source) {
// markdown 編譯用的 markdown-it
return wrapper(new MarkdownIt().render(source))
}
2、找到變量位置，塞進(jìn)對(duì)應(yīng)的.md的指定位置
1)找到變量位置
使用正則匹配定義的規(guī)則，找到被{{:}} 包圍的字符串，如上例所示則為‘image.vue?type=template'
2)讀取文件
如果是其他.js、.html等普通文件，直接使用fs.readFileSync讀取替換即可，因是.vue,我們希望傳入type來(lái)獲取不同的塊（template、script等）
const replaceResults = (template, baseDir) => {
const regexp = new RegExp("\\{\\{:([^\\}]+)\\}\\}", "g")
return template.replace(regexp, function(match) {
// 獲取文件變量
match = match.substr(3, match.length - 5)
let [loadFile, query=''] = match.split('?')
// 讀取文件內(nèi)容
const source = fs.readFileSync(path.join(baseDir, loadFile), "utf-8").replace(/[\r\n]*$/, "")
if (path.extname(loadFile) === ".vue") {
let { type } = loaderUtils.parseQuery(`?${query}`)
return replaceVue(source, type) // 根據(jù)type提取.vue里的不同塊
}
return source // 非.vue直接返回文件內(nèi)容
})
};
3、從.vue里取出template&script
const replaceVue = (source, type) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: 'html',
script: 'javascript' //,
// style: 'css'
}
return lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`
}
如若要取一個(gè)文件里的多個(gè)塊，則需多次調(diào)用，考慮到我們的組件庫(kù)場(chǎng)景，默認(rèn)返回template和script(未使用type參數(shù)時(shí)),
對(duì)上面代碼進(jìn)行優(yōu)化，一次性從.vue中取出多個(gè)塊
// replaceVue(source, [type])
const replaceVue = (source, types = ['template', 'script']) => {
const descriptor = templateCompiler.parseComponent(source)
const lang = {
template: 'html',
script: 'javascript' //,
// style: 'css'
}
return types.map(type => lang[type] && `
\`\`\`${lang[type]}
${descriptor[type].content}
\`\`\`
`).join('')
}
大功告成🎉🎉！ 那么，如何使用呢？
使用（給我小星星🌟）
安裝
npm i vue-markd-loader -D
配置
rules: [{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'vue-markd-loader',
options: {
replaceFiles: true , // 默認(rèn)true, 是否將文件填充進(jìn)md
wrapper:true // 默認(rèn)true,默認(rèn)輸出Vue Component ,false 時(shí)輸出html片段
}
}
]
}]
// main.js import 'highlight.js/styles/github.css' // 可以使用任意喜歡的主題喲 import 'github-markdown-css'
其他
第一次擼webpack loader,如有不正確/不足的地方，歡迎指正。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)板的方法
本篇文章主要介紹了Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)板的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤(pán)功能(防止頁(yè)面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題,通過(guò)實(shí)例代碼給大家分享解決方案，對(duì)vue?移動(dòng)端彈出鍵盤(pán)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vuepress實(shí)現(xiàn)自定義首頁(yè)的樣式風(fēng)格
這篇文章主要介紹了vuepress實(shí)現(xiàn)自定義首頁(yè)的樣式風(fēng)格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
最近開(kāi)發(fā)了一個(gè)功能,頁(yè)面首頁(yè)會(huì)加載大量的圖片,初次進(jìn)入頁(yè)面時(shí),會(huì)導(dǎo)致頁(yè)面性能下降,于是乎,我改進(jìn)了這個(gè)功能,可以讓所有圖片自動(dòng)懶加載,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06