欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue組件文檔（.md）中如何自動導(dǎo)入示例（.vue）詳解

 更新時間：2019年01月25日 15:35:19   作者：水叨叨  
這篇文章主要給大家介紹了關(guān)于vue組件文檔（.md）中如何自動導(dǎo)入示例（.vue）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

癥結(jié)（懶癌患者）

在寫組件庫文檔的時候，會把示例代碼粘貼到文檔里，這樣做有一個很惡心的地方：每次組件迭代或修改示例都需要重新修改文檔中的代碼片段。長年累月，苦不堪言。

猜想（狂想曲）

所以我想，可不可以把.vue文件里的template塊和script塊取出來，放入對應(yīng)的.md文件中

比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替換示例中對應(yīng)的template|script塊

# xx

## 示例代碼

// {{:}} 定義變量規(guī)則模版（加個冒號防沖突）
{{:image.vue?type=template}} // 對應(yīng).vue 的template

{{:image.vue?type=script}} // 對應(yīng).vue 的template

{{:index.js}} // 對應(yīng)index.js

## 參數(shù)說明

xxx...

output

# xx

## 示例代碼

 
// image.vue template
<template>
 <div>xx</div>
</template>

// image.vue script
<script>
 ...
</script>

// index.js

var x = 1

## 參數(shù)說明

xxx...

動手（能動手絕不**）

要實(shí)現(xiàn)以上功能，需要探索以下幾點(diǎn)：

  • 從.vue里取出template&script
  • 塞進(jìn)對應(yīng)的.md的變量位置
  • 將.md文件轉(zhuǎn)為Vue Componet / html

如果按照我們寫js的習(xí)慣，以下嵌套排列可能更易讀

將.md文件轉(zhuǎn)為Vue Componet / html

找到變量位置，塞進(jìn)對應(yīng)的.md的指定位置

從.vue里取出template&script

一步一步來吧：

1、將.md文件轉(zhuǎn)為Vue Componet / html

要想在vue中使用.md文件為組件，只需要用loader將md轉(zhuǎn)成Vue Componet即可。

這個過程很簡單,以下為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)對應(yīng)的.md的指定位置

1)找到變量位置

使用正則匹配定義的規(guī)則，找到被{{:}} 包圍的字符串，如上例所示則為‘image.vue?type=template'

2)讀取文件

如果是其他.js、.html等普通文件，直接使用fs.readFileSync讀取替換即可，因是.vue,我們希望傳入type來獲取不同的塊（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}
 \`\`\` 
 ` 
}

如若要取一個文件里的多個塊，則需多次調(diào)用，考慮到我們的組件庫場景，默認(rèn)返回template和script(未使用type參數(shù)時),
對上面代碼進(jìn)行優(yōu)化，一次性從.vue中取出多個塊

// 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 時輸出html片段 
  }
  }
 ]
 }]
// main.js 
import 'highlight.js/styles/github.css' // 可以使用任意喜歡的主題喲
import 'github-markdown-css'

其他

第一次擼webpack loader,如有不正確/不足的地方，歡迎指正。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論