1. 環(huán)境配置

全局安裝 vue-cli：

2. 初始化項(xiàng)目

這里使用官方的 vue-cli 初始化一個(gè) Vue 項(xiàng)目

vue-cli.png

運(yùn)行項(xiàng)目：

npm run.png

3.寫插件

在 src 文件夾下面建 lib 文件夾，用于存放插件。整個(gè)項(xiàng)目目錄如下所示

目錄.png

根據(jù)自己的需求，實(shí)現(xiàn)具體功能，這里主要是做個(gè)測(cè)試，這個(gè)插件的內(nèi)容就很簡(jiǎn)單。

內(nèi)容.png

添加vue-chen-label.js文件，js 中寫 install 方法，內(nèi)容如下：

寫插件.png

4.本地測(cè)試

4.1 將 App.vue 多余代碼刪除。

4.2 在 main.js 中引入

本地測(cè)試引入.png

4.3 在 App.vue 中使用

本地測(cè)試.png

4.4 本地測(cè)試的結(jié)果

本地測(cè)試1.png

5. 配置打包

5.1 修改 package.json

因?yàn)榻M件包是公用的，所以private為false
配置main結(jié)點(diǎn)，如果不配置，我們?cè)谄渌?xiàng)目中就不用import XX from '包名'來(lái)引用了，只能以包名作為起點(diǎn)來(lái)指定相對(duì)的路徑

package.png

5.2 修改 .gitignore 文件

因?yàn)橐胐ist文件夾，所以在.gitignore文件中把dist/去掉。

ignore.png

5.3 修改 index.html文件

5.4 修改webpack.base.conf.js

修改打包入口文件

base.png

5.5修改webpack.prod.conf.js

為了支持多種使用場(chǎng)景，我們需要選擇合適的打包格式。
UMD 同時(shí)支持兩種執(zhí)行環(huán)境。顯而易見(jiàn)，我們應(yīng)該選擇 UMD 格式。Webpack 中指定輸出格式的設(shè)置項(xiàng)為 output.libraryTarget