Vuecli3库模式搭建组件库并发布到npm的流程-创新互联

市面上目前已有各种各样的UI组件库，比如 Element 和 iView ，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。

所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。

以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程。

vColorPicker 插件 DEMO

一、技术栈

如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。

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

二、大纲

想要搭建一个组件库，我们必须先要有一个大概的思路。

1. 规划目录结构
2. 配置项目以支持目录结构
3. 编写组件
4. 编写示例
5. 配置使用库模式打包编译
6. 发布到npm

三、规划目录结构

1、创建项目

在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。

$ vue create .

2、调整目录

我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。

.
...
|-- examples // 原 src 目录，改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件
...
.