如何封裝併發佈一個屬於自己的ui組件庫

以前就一直有個想法自己能不能封裝一個類似於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更加了解
會更確切地用到父傳子，子傳父，等組件信息之間的通訊

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