- 环境配置
全局安装 vue-cli： -
初始化项目
这里使用官方的 vue-cli 初始化一个 Vue 项目
vue-cli.png
运行项目：npm run.png
3.写插件
在 src 文件夹下面建 lib 文件夹，用于存放插件。整个项目目录如下所示
根据自己的需求，实现具体功能，这里主要是做个测试，这个插件的内容就很简单。
添加vue-chen-label.js文件，js 中写 install 方法，内容如下：
4.本地测试
4.1 将 App.vue 多余代码删除。
4.2 在 main.js 中引入
4.3 在 App.vue 中使用
4.4 本地测试的结果
- 配置打包
5.1 修改 package.json
因为组件包是公用的，所以private为false
配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
5.2 修改 .gitignore 文件
因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。
5.3 修改 index.html文件
5.4 修改webpack.base.conf.js
修改打包入口文件
5.5修改webpack.prod.conf.js
为了支持多种使用场景，我们需要选择合适的打包格式。
UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget
另外，为了将css打包成一个文件，所以需要修改 webpack.prod.conf.js 中的
plugins 选项
6.用npm打包
6.1发布到npm
在 npm官网 注册一个npm账号
登录npm账号，输入用户名、密码、邮箱
执行npm publish
这里如果之前切换过数据源，得切换回来
6.2 发布成功
可以在npm官网上搜到自己写的组件
7.使用
新建另一个项目
在main.js引用，在App.vue使用
8.组件UI库的搭建
组件库的结构
在components目录下放所有的组件，现在用tag标签组件做展示。
公共的样式可以写在styles文件夹下，在index文件里引入。
index.js作为组件库的入口。
views文件夹下的home.vue是示例页面。
组件库的打包
