為什么構(gòu)建組件庫(kù)

不用再重復(fù)造輪子咆繁，所有的項(xiàng)目都能用婴谱；希望有一套一類(lèi)應(yīng)用的標(biāo)準(zhǔn)商源，并且對(duì)組件的樣式有較高的要求代虾，那么你就需要開(kāi)發(fā)一個(gè)組件庫(kù)了

開(kāi)發(fā)組件庫(kù)步驟

1.創(chuàng)建項(xiàng)目：正常的創(chuàng)建vue項(xiàng)目

2.修改配置：

在scripts字段中新增一個(gè)命令腳本，如：

"build-lib": "vue-cli-service build  --target lib --entry src/components/index.js --name uiLib"艇肴；

--target屬性表示構(gòu)建目標(biāo)腔呜，默認(rèn)為應(yīng)用模式，這里需要設(shè)置為lib再悼，表示啟用庫(kù)模式核畴。
--name屬性表示構(gòu)建的名稱(chēng)，可以與package.json文件中的name字段的值不相同冲九；
--最后表示入口文件谤草，默認(rèn)為src/App.vue，在這里我們修改為了./src/index.js。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-lib": "vue-cli-service build  --target lib --entry src/components/index.js --name uiLib"
  },

3.編寫(xiě)組件丑孩，導(dǎo)出組件

正常的編寫(xiě)一個(gè)組件冀宴，例如在componets文件下創(chuàng)建一個(gè)myButton文件，建一個(gè)MyButton組件温学，（可以多創(chuàng)建幾個(gè)UI組件略贮，例如再創(chuàng)建一個(gè)MyInput 組件）。

image.png

在src下創(chuàng)建index.js,編寫(xiě)導(dǎo)出組件的代碼

import MyInput from './my-input'
import MyButton from './my-button';

// 存儲(chǔ)組件列表
const components = [
    MyInput,
    MyButton
]
//install是讓業(yè)務(wù)代碼在main.js 引入之后 use(myUi)  注冊(cè)到全局用的
const install = (app, opts = {}) => {
    components.forEach(item => {
        app.component(item.name, item)
    })
}

const exportObject = {
    // 全局導(dǎo)出
    version: '1.0.0',
    install
};
export default exportObject;

4.打包組件庫(kù)

根目錄下打開(kāi)cmd窗口枫浙，輸入npm run build-lib命令
在根目錄下會(huì)生成dist文件夾刨肃，其里面的文件如下圖所示：

image

到此，組件已經(jīng)完成構(gòu)建了箩帚。將打包好的****.umd.min.js直接放到業(yè)務(wù)項(xiàng)目中真友，直接引入也是可以用的。

5.將組件發(fā)布到npm的步驟

首先是注冊(cè)npm：

1.官網(wǎng)注冊(cè)
https://www.npmjs.com/signup
2.命令行注冊(cè)
npm adduser //按照提示輸入用戶(hù)名,郵箱等即可
3.注冊(cè)后登陸
npm login //按照提示輸入用戶(hù)名,密碼,郵箱等即可

在業(yè)務(wù)項(xiàng)目中安裝

npm install --save @username/component-name //@npm官網(wǎng)注冊(cè)u(píng)sername/組件項(xiàng)目名 == @username/component-name

然后引入
import '@username/component-name'

使用即可

6.優(yōu)化

1.排外打包
如果組件庫(kù)項(xiàng)目和業(yè)務(wù)項(xiàng)目引用了相同的依賴(lài)紧帕，比如element盔然，可以設(shè)置排外打包，在業(yè)務(wù)項(xiàng)目中引用即可是嗜，減少組件庫(kù)包體積愈案。

image.png

2.按需引入
在組件庫(kù)項(xiàng)目改動(dòng)如下：
例如，在myButton下建一個(gè)js文件鹅搪，編寫(xiě)單獨(dú)導(dǎo)出組件的代碼站绪，如圖：

image.png

在src目錄下的index.js文件，將componets/MyButton.vue組件導(dǎo)出：

import MyInput from './my-input'
import MyButton from './my-button';

// 存儲(chǔ)組件列表
const components = [
    MyInput,
    MyButton
]

const install = (app, opts = {}) => {
    components.forEach(item => {
        app.component(item.name, item)
    })
}

const exportObject = {
    // 全局導(dǎo)出
    version: '1.0.0',
    install,
    MyInput, // 單獨(dú)導(dǎo)出button組件用于按需加載
    MyButton
};

export default exportObject;