vue組件文檔生成備注詳解
vue組件文檔生成備注
在我們團隊開發(fā)時一定會有一些公共組件誕生出來，那么這些誕生出來的組件我們要怎么讓別人知道并且使用呢。寫一個專門維護的文檔頁面？專人去維護？還是選擇一個線上公共word的更新上去？
其他的我就不說什么優(yōu)缺點了 自己體會
我只說一下我們團隊中是怎么維護這些公共組件的。
說之前我們先了解一下這個插件vue-styleguidis
npm的說話時：Vue-Styleguidist是Vue組件的樣式指南生成器。它列出了組件，并根據(jù)Markdown文件顯示了可編輯的實時使用示例。您可以使用它來生成靜態(tài)HTML頁面以進行共享和發(fā)布，也可以使用該平臺作為使用熱重載的dev服務(wù)器開發(fā)新組件的工作臺。
看到了吧，說的很清楚 Vue組件的樣式指南生成器。它列出了組件，并根據(jù)Markdown文件顯示了可編輯的實時使用示例
好！下面就是我在實際項目中的應(yīng)用
內(nèi)容實現(xiàn)
我們項目是使用vue-cli來創(chuàng)建的，我也只講這個其他的你們?nèi)ニ哑渌牟┛桶桑?/p>
cd到自己的項目下，敲下如下命令。
vue add styleguidist
這時我們項目會增加一下文件和代碼如圖
package.json中增加了
講到這里我們大概的配置就講完了
下面就是講一講關(guān)于組件中我們怎么來寫文檔了
寫好了之后我們可以運行一下打包一下
之后可以看到下面的頁面效果
具體什么意思我就不多說了！我這里就是告訴你怎么跑起來和怎么配置，并且給你證明這個可以用！
Vuese自動生成vue組件文檔
安裝Vuese
npm i vuese --save-d
在根目錄下新增配置文件 .vueserc
{
? "include": [
? ? "./components/**/*.vue"
? ],
? "title": "ASui-doc",
? "genType": "docute",
? "outDir": "./docs"
}include：指定構(gòu)建組件目錄。title: 文檔名稱genType: 指定生成的文檔類型，docute 會把vue文件構(gòu)建出的所有markdown，整合為一個單頁應(yīng)用。outDir：指定文檔輸出目錄，這里指定為./docs，是為了配和在master分支接入OA Pages。
在package.json新增腳本,并啟動
"scripts": {
? ? ...
? ? "build_doc": "npx vuese gen && npx vuese serve --open"
?},運行 npm run build_doc 啟動腳本
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue引入maptalks地圖及聚合效果的實現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue導(dǎo)入Echarts實現(xiàn)折線散點圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報錯的簡單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
在正式使用Vue進行移動端頁面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動端h5環(huán)境搭建的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
防抖節(jié)流就是使用定時器 來實現(xiàn)我們的目的。這篇文章通過實例代碼給大家介紹vue防抖與節(jié)流的使用，感興趣的朋友跟隨小編一起看看吧2019-11-11
vue深度優(yōu)先遍歷多層數(shù)組對象方式(相當(dāng)于多棵樹、三級樹)
這篇文章主要介紹了vue深度優(yōu)先遍歷多層數(shù)組對象方式(相當(dāng)于多棵樹、三級樹)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中input的v-model清空操作，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼
本文主要介紹了Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue實現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺管理系統(tǒng)里進行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01