市面上目前已有各种各样的UI组件库，比如 Element 和 iView ，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。
所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。
以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程。
vColorPicker 插件 DEMO
一、技术栈
如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。
Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库
npm：组件库将存放在npm
webpack：修改配置需要一点 webapck 的知识。
二、大纲
想要搭建一个组件库，我们必须先要有一个大概的思路。
规划目录结构
配置项目以支持目录结构
编写组件
编写示例
配置使用库模式打包编译
发布到npm
三、规划目录结构
1、创建项目
在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。
$ vue create .2、调整目录
我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。
.
...
|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件
...
.
四、配置项目以支持新的目录结构
我们通过上一步的目录改造后，会遇到两个问题。
src 目录更名为 examples ，导致项目无法运行
新增 packages 目录，该目录未加入 webpack 编译
注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
1、重新配置入口，修改配置中的 pages 选项
新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。
这里使用 pages 修改入口到 examples
module.exports = {
// 修改 src 目录 为 examples 目录
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
}2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项
