vue組件文檔生成備注

在我們團(tuán)隊(duì)開發(fā)時(shí)一定會(huì)有一些公共組件誕生出來，那么這些誕生出來的組件我們要怎么讓別人知道并且使用呢。寫一個(gè)專門維護(hù)的文檔頁面？專人去維護(hù)？還是選擇一個(gè)線上公共word的更新上去？

其他的我就不說什么優(yōu)缺點(diǎn)了 自己體會(huì)

我只說一下我們團(tuán)隊(duì)中是怎么維護(hù)這些公共組件的。

說之前我們先了解一下這個(gè)插件vue-styleguidis

npm的說話時(shí)：Vue-Styleguidist是Vue組件的樣式指南生成器。它列出了組件，并根據(jù)Markdown文件顯示了可編輯的實(shí)時(shí)使用示例。您可以使用它來生成靜態(tài)HTML頁面以進(jìn)行共享和發(fā)布，也可以使用該平臺(tái)作為使用熱重載的dev服務(wù)器開發(fā)新組件的工作臺(tái)。

看到了吧，說的很清楚 Vue組件的樣式指南生成器。它列出了組件，并根據(jù)Markdown文件顯示了可編輯的實(shí)時(shí)使用示例

好！下面就是我在實(shí)際項(xiàng)目中的應(yīng)用

內(nèi)容實(shí)現(xiàn)

我們項(xiàng)目是使用vue-cli來創(chuàng)建的，我也只講這個(gè)其他的你們?nèi)ニ哑渌牟┛桶桑?/p>

cd到自己的項(xiàng)目下，敲下如下命令。

vue add styleguidist

這時(shí)我們項(xiàng)目會(huì)增加一下文件和代碼如圖

package.json中增加了

講到這里我們大概的配置就講完了

下面就是講一講關(guān)于組件中我們怎么來寫文檔了

寫好了之后我們可以運(yùn)行一下打包一下

之后可以看到下面的頁面效果

具體什么意思我就不多說了！我這里就是告訴你怎么跑起來和怎么配置，并且給你證明這個(gè)可以用！

Vuese自動(dòng)生成vue組件文檔

安裝Vuese

npm i vuese --save-d

在根目錄下新增配置文件 .vueserc

{
? "include": [
? ? "./components/**/*.vue"
? ],
? "title": "ASui-doc",
? "genType": "docute",
? "outDir": "./docs"
}

• include：指定構(gòu)建組件目錄。
• title: 文檔名稱
• genType: 指定生成的文檔類型，docute 會(huì)把vue文件構(gòu)建出的所有markdown，整合為一個(gè)單頁應(yīng)用。
• outDir：指定文檔輸出目錄，這里指定為./docs，是為了配和在master分支接入OA Pages。

在package.json新增腳本,并啟動(dòng)

"scripts": {
? ? ...
? ? "build_doc": "npx vuese gen && npx vuese serve --open"
?},

運(yùn)行 npm run build_doc 啟動(dòng)腳本

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評論