vue組件文檔生成備注詳解
vue組件文檔生成備注
在我們團(tuán)隊(duì)開發(fā)時(shí)一定會(huì)有一些公共組件誕生出來，那么這些誕生出來的組件我們要怎么讓別人知道并且使用呢。寫一個(gè)專門維護(hù)的文檔頁(yè)面？專人去維護(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頁(yè)面以進(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)于組件中我們?cè)趺磥韺懳臋n了
寫好了之后我們可以運(yùn)行一下打包一下
之后可以看到下面的頁(yè)面效果
具體什么意思我就不多說了！我這里就是告訴你怎么跑起來和怎么配置，并且給你證明這個(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è)應(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue開發(fā)移動(dòng)端h5環(huán)境搭建的全過程
在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
防抖節(jié)流就是使用定時(shí)器 來實(shí)現(xiàn)我們的目的。這篇文章通過實(shí)例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧2019-11-11
vue深度優(yōu)先遍歷多層數(shù)組對(duì)象方式(相當(dāng)于多棵樹、三級(jí)樹)
這篇文章主要介紹了vue深度優(yōu)先遍歷多層數(shù)組對(duì)象方式(相當(dāng)于多棵樹、三級(jí)樹)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中input的v-model清空操作，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼
本文主要介紹了Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺(tái)管理系統(tǒng)里進(jìn)行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01