以前就一直有個想法自己能不能封裝一個類似于elementui一樣的組件庫，然后發布到npm上去，畢竟前端說白了，將組件v上去，然后進行數據交互。借助這次端午，終于有機會，嘗試自己去封裝發布組件庫了

我這里了只做最簡單的按鈕和輸入框的封裝，重在如何將組件發布到npm上去

原材料：
components中兩個封裝好的組件

在src同級目錄下創建一個文件夾packages
以后我們的所有操作都是基于packages這個文件進行的，也就是將它打包成dist

新建一個index.js的同時，將上面兩個組件丟進去

1、在index.js中寫入以下代碼

（全局批量注冊組件）

import kButton from './button.vue' import kInput from './input.vue'const components = [kButton,kInput ] // 定義 install 方法，接收 Vue 作為參數。如果使用 use 注冊插件，則所有的組件都將被注冊 const install = function (Vue) {// 遍歷注冊全局組件components.forEach(component => {Vue.component(component.name, component)})// 判斷是否是直接引入文件,如果是，就不用調用 Vue.use() if (typeof window !== 'undefined' && window.Vue) {install(window.Vue) }}// 導出的對象必須具有 install，才能被 Vue.use() 方法安裝 export default {install }

2、在package.json中加入以下代碼

（加入腳本命令）

"private": false,"main": "dist/kejin-ui.umd.min.js" ,"author": {"name": "kjh"} "lib": "vue-cli-service build --target lib packages/index.js"

3、然后執行npm run lib

最后在同級目錄下生成一個dist包，我們接下來就是將dist發到npm上去

4、上傳前的操作

加上一個.npmignore文件

# 忽略目錄 examples/ packages/ public/# 忽略指定文件 vue.config.js babel.config.js *.map

這個意思就是只上傳dist，其他都選擇忽略，這個和gitignore有點類似

5、上傳到npm上去

注冊登錄npm就不說了，
輸入npm login，會讓你輸入密碼賬號，登錄成功后
輸入npm publish，就可以將你的組件發布到npm上了
這個組件的名字就是package.json里面的name，這里我們設置的是kejin-ui

讓我們試一下

新建一個vue-cli的腳手架
在cmd命令行中輸入npm install kejin-ui

在main.js中加入

import KejinUI from 'kejin-ui'; import 'kejin-ui/dist/kejin-ui.css'; Vue.use(KejinUI);

在app.vue中寫入

<k-button>按鈕</k-button> <k-button type="red">按鈕</k-button> <k-button type="green">按鈕</k-button> <k-input></k-input>

引用成功，我這里就簡單給button傳入了顏色，沒怎么太封裝，后期會把重點放在封裝上，包括以前自己寫的一些組件，都會想怎么去封裝，甚至是一些特效
話說npm上只有一百多萬個組件庫，不知道這里面中國發布了多少

感覺封裝組件會對那些諸如elementui更加了解
會更確切地用到父傳子，子傳父，等組件信息之間的通訊

還是挺有趣的，加油吧！！！！

總結

以上是生活随笔為你收集整理的如何封装并发布一个属于自己的ui组件库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。