vue組件文檔生成備注詳解
vue組件文檔生成備注
在我們團(tuán)隊開發(fā)時一定會有一些公共組件誕生出來，那么這些誕生出來的組件我們要怎么讓別人知道并且使用呢。寫一個專門維護(hù)的文檔頁面？專人去維護(hù)？還是選擇一個線上公共word的更新上去？
其他的我就不說什么優(yōu)缺點了 自己體會
我只說一下我們團(tuán)隊中是怎么維護(hù)這些公共組件的。
說之前我們先了解一下這個插件vue-styleguidis
npm的說話時：Vue-Styleguidist是Vue組件的樣式指南生成器。它列出了組件，并根據(jù)Markdown文件顯示了可編輯的實時使用示例。您可以使用它來生成靜態(tài)HTML頁面以進(jìn)行共享和發(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中四種操作dom方法，首先，在vue中強烈禁用原生與jquery來操作DOM元素。我們要充分的利用vue的優(yōu)勢：MVVM，在vue中程序員幾乎不操作DOM，只需要維護(hù)好數(shù)據(jù)即可，vue給程序員提供ref引用，不調(diào)用api直接獲取元素組件的使用2023-02-02
這篇文章主要介紹了vue中template的三種寫法示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
Vue實現(xiàn)docx、pdf格式文件在線預(yù)覽功能
在業(yè)務(wù)中，如果遇到文檔管理類的功能，會出現(xiàn)需要在線預(yù)覽的業(yè)務(wù)需求，本文主要是通過第三方庫來實現(xiàn)文檔預(yù)覽功能，并將其封裝成preview組件,感興趣的可以了解一下2022-09-09
vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例
今天小編就為大家分享一篇vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue+Mock.js模擬登錄和表格的增刪改查功能,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue日期時間選擇器組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了pinia，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關(guān)于vue路由中前進(jìn)后退的一些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue路由具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問題
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue鍵盤事件點擊事件加native操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07