vue組件庫的基本開發步驟


市面上目前已有各種各樣的UI組件庫,比如 Element 和 iView,他們的強大毋庸置疑。但是我們面臨的情況是需求越來越復雜,當它們不能再滿足我們需求的時候,這個時候就有必要開發一套屬於自己團隊的組件庫了。

為何要進行組件庫開發?

如果你所在的公司對於頁面的樣式沒有什么要求,那么你只要隨便拿一個組件庫來用就行了,比如element、iView等等,不用再重復造輪子了;
如果你目前只有個人用一個組件,或者是只對個別組件有要求,那么只要在你的工程里面開發一個.vue單文件組件就可以了;如果你的團隊想要一個更加快速的開發方式,希望有一套一類應用的標准,並且對組件的樣式有較高的要求,那么你就需要開發一個組件庫了。

開發組件庫步驟:

創建項目

 

調整項目結構

 

編寫組件

 

使用vue-cli-service庫模式打包編譯

 

發布到npm

開發步驟:

第一步:創建一個項目

 

 

 第二步:創建完成項目之后,你就會在項目的根目錄發現這樣的界面,之后添加一個新的文件夾,名為packages,將src文件重命名為examples

 

 第三步:將項目拖到編譯器中,在根目錄創建一個vue.config.js文件

 

 

 

 第四步:創建packages文件夾中的所需文件,界面如下,編寫組件

 

 

其中:

|-- datePicker      // 新編寫的組件,以datepicker為例

|-- theme-default   // 主題文件

主題文件較為特殊,他作為單獨的一個包進行發布引入,方便進行主題發布,后面再進行介紹。下面對datePicker進行介紹:

第五步:

datePicker.vue文件代碼

 

 

datePicker/index.js

 

  批量注冊組件

 

Package/index.js

 

本地測試組件

我們的組件以及編寫完成,第一步先在本地進行測試:

examples/main.js

 

 

如何在瀏覽器中就可以看到我們的組件運行成功了,下一步就是要將我們的代碼打包成npm庫了,那么需要通過vue-cli3中vue-cli-service的庫模式進行打包。

 

 

執行 npm run build-lib

 

 

修改package.json

 

 

根目錄添加.npmignore文件

發布到npm下,只需要lib目錄、package.json 和readme.md文件,所以需要忽略掉其他的目錄
.npmignore

(.npmignore文件是一個隱藏文件,所以在編譯器中不可見,在文件根目錄添加如下代碼:)

examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map

登錄npm (如果沒有npm賬號,可以去npm官網注冊一個)

 

 

 

 最后登錄npm官網查看,就成功啦!!!

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM