阿坝州网站建设公司

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

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

创新互联专业为企业提供宜川网站建设、宜川做网站、宜川网站设计、宜川网站制作等企业网站建设、网页设计与制作、宜川企业网站模板建站服务，10余年宜川做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

以下一个简单的颜色选择器插件 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 用于编写存放组件
...
.

网站名称：Vuecli3库模式搭建组件库并发布到npm的流程-创新互联
网页路径：http://azwzsj.com/article/dshoph.html

其他资讯