2018-10-10

1. 环境配置
   全局安装 vue-cli：

2. 初始化项目
   这里使用官方的 vue-cli 初始化一个 Vue 项目

   
   vue-cli.png
   运行项目： npm run.png

3.写插件
在 src 文件夹下面建 lib 文件夹，用于存放插件。整个项目目录如下所示

目录.png

根据自己的需求，实现具体功能，这里主要是做个测试，这个插件的内容就很简单。

内容.png
添加vue-chen-label.js文件，js 中写 install 方法，内容如下：
写插件.png

4.本地测试

4.1 将 App.vue 多余代码删除。
4.2 在 main.js 中引入

本地测试引入.png

4.3 在 App.vue 中使用

本地测试.png
4.4 本地测试的结果
本地测试1.png

5. 配置打包

5.1 修改 package.json
因为组件包是公用的，所以private为false
配置main结点，如果不配置，我们在其他项目中就不用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 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget

prod.png

另外，为了将css打包成一个文件，所以需要修改 webpack.prod.conf.js 中的
plugins 选项

css.png
6.用npm打包
打包.png
6.1发布到npm
在 npm官网 注册一个npm账号
登录npm账号，输入用户名、密码、邮箱
执行npm publish
这里如果之前切换过数据源，得切换回来
登录npm.png
6.2 发布成功
可以在npm官网上搜到自己写的组件
发布成功.png

7.使用
新建另一个项目
在main.js引用，在App.vue使用

引用.png
使用.png
效果.png

8.组件UI库的搭建
组件库的结构

组件库结构.png

在components目录下放所有的组件，现在用tag标签组件做展示。
公共的样式可以写在styles文件夹下，在index文件里引入。
index.js作为组件库的入口。

组件库入口.png

views文件夹下的home.vue是示例页面。

组件库示例.png

组件库的打包

组件库打包.png