1. 環(huán)境配置

全局安裝 vue-cli：

2. 初始化項目

這里使用官方的 vue-cli 初始化一個 Vue 項目

vue-cli.png

npm run.png

3.寫插件

在 src 文件夾下面建 lib 文件夾，用于存放插件。整個項目目錄如下所示

目錄.png

內(nèi)容.png

寫插件.png

4.本地測試

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

4.2 在 main.js 中引入

本地測試引入.png

4.3 在 App.vue 中使用

本地測試.png

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

本地測試1.png

5. 配置打包

5.1 修改 package.json

因為組件包是公用的，所以private為false
配置main結(jié)點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑

package.png

5.2 修改 .gitignore 文件

因為要用dist文件夾，所以在.gitignore文件中把dist/去掉。

ignore.png

5.3 修改 index.html文件

5.4 修改webpack.base.conf.js

修改打包入口文件

base.png

5.5修改webpack.prod.conf.js

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

prod.png

另外，為了將css打包成一個文件，所以需要修改 webpack.prod.conf.js 中的
plugins 選項

css.png

6.用npm打包

打包.png

6.1發(fā)布到npm

在 npm官網(wǎng) 注冊一個npm賬號
登錄npm賬號，輸入用戶名、密碼、郵箱
執(zhí)行npm publish
這里如果之前切換過數(shù)據(jù)源，得切換回來

登錄npm.png

6.2 發(fā)布成功

可以在npm官網(wǎng)上搜到自己寫的組件

發(fā)布成功.png

7.使用

新建另一個項目
在main.js引用，在App.vue使用

引用.png

使用.png

效果.png

8.組件UI庫的搭建

組件庫的結(jié)構(gòu)

組件庫結(jié)構(gòu).png

在components目錄下放所有的組件，現(xiàn)在用tag標(biāo)簽組件做展示。
公共的樣式可以寫在styles文件夾下，在index文件里引入。

樣式入口.png

公共樣式.png

index.js作為組件庫的入口。

組件庫入口.png

views文件夾下的home.vue是示例頁面。

組件庫示例.png

組件庫的打包

組件庫打包.png