八步開發一個vue的組件庫

本次模仿elementui去簡單的開發一個vue的組件庫， 主要是記錄vue組件庫的開發流程，因此省略了組件樣式、功能的開發

1、準備工做

vue-cli版本：4.0.5

cli版本的不一樣，打包構建的方式不同，當前版本打包庫使用比較簡單，無需過多的配置

2、建立項目

vue create biu-ui

爲了簡單點，這裏我就選擇默認的模板來開發組件庫，並刪除了根目錄下的components文件夾，完成後的項目結構以下：

3、寫組件

在根目錄下我新建了一個package文件夾去存放咱們的組件，並每一個組件單獨的文件夾管理，目錄如圖。在組件的文件夾下添加一個index.js文件用來向外暴露組件，方便引用

相同的方法，再新建一個input組件

4、註冊安裝組件

在packages下的index.js如圖所示；這裏主要的做用是向外暴露一個install()方法，供Vue.use()調用，調用時會傳入Vue；在install方法中用遍歷的方式結合Vue.components()去組冊組件

5、使用組件庫

在main.js中引入組件庫而且使用vue.use()調用install()安裝組件庫

由於是全局引入組件庫的，因此直接在組件中使用組件庫中的組件

6、效果

7、打包組件庫

打包庫的命令，能夠參考vue-cli文檔，文檔鏈接；這裏大概的意思就是對packages裏的組件進行庫打包

打包後根目錄多出一個lib的文件，這就是組件庫的打包結果

8、測試打包文件

在main.js中引入組件庫修改成打包後的biu-ui.common.js測試打包

到這裏，一個簡單的vue組件庫的框架樣子就搭建好了，能夠按需往packages添加你須要的組件，去豐富組件庫。這裏只是一個本地應用的組件庫，還沒進行發佈npm，今天就寫到這裏了，日後在添加如何發佈到npm和實現組件按需引入，有興趣深刻的話能夠去研究參考elementui組件庫，這個庫寫得很是好

文章對您有幫助的話，不妨點個贊👍

相關連接：

JS的防抖、節流函數

JS經常使用的深、淺拷貝

VUE的實現原理（數據劫持、觀察者模式）

Javascript實現簡單的冒泡排序、插入排序

一個很是簡單的-發佈訂閱模式