Vuecli3库模式搭建组件库并发布到npm的流程-创新互联
市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了。
创新互联专业为企业提供宜川网站建设、宜川做网站、宜川网站设计、宜川网站制作等企业网站建设、网页设计与制作、宜川企业网站模板建站服务,10余年宜川做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下。
以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程。
vColorPicker 插件 DEMO
一、技术栈
如何通过新版脚手架创建项目,这里就不提了,自行看官方文档。
- Vue-cli3: 新版脚手架的库模式,可以让我们很轻松的创建打包一个库
- npm:组件库将存放在npm
- webpack:修改配置需要一点 webapck 的知识。
二、大纲
想要搭建一个组件库,我们必须先要有一个大概的思路。
- 规划目录结构
- 配置项目以支持目录结构
- 编写组件
- 编写示例
- 配置使用库模式打包编译
- 发布到npm
三、规划目录结构
1、创建项目
在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择。
$ vue create .
2、调整目录
我们需要一个目录存放组件,一个目录存放示例,按照以下方式对目录进行改造。
. ... |-- examples // 原 src 目录,改成 examples 用作示例展示 |-- packages // 新增 packages 用于编写存放组件 ... .
网站标题:Vuecli3库模式搭建组件库并发布到npm的流程-创新互联
网址分享:http://scyanting.com/article/dshoph.html