Vue 搭建h5组件库并发布到 npm

目前适配 vue 开发的已有各种各样的UI组件库，比如 `Element `、`mint-ui` 和`iView `，它们确实强大和完善。但是用户的需求越来越复杂，当第三方库不能满足的时候，就有必要开发一套属于自己团队的组件库。

通过对mint-ui的源码查看，希望利用文档中一个例子的具体描述，实现：小能做一个简单的组件被复用，大能做一个公司甚至开源组件库。
 
以下是一个简单的功能组件，讲述从开发到发布到npm的流程。由于近期本人开发项目用的vue-cli3，所以此次demo用的新版脚手架，至于如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。

一、技术栈

 Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库
 npm：组件库将存放在npm
 webpack：修改配置需要一点 webapck 的知识。

二、步骤梳理

搭建组件库之前，我们先要有一个大概的思路：
1. 规划目录结构
2. 配置项目以支持目录结构
3. 编写组件
4. 编写示例
5. 配置使用库模式打包编译
6. 发布到npm

三、根据mint-ui格式修改目录结构

 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