Vue cli3 库模式搭建组件库并发布到 npm的流程


Posted in Javascript onOctober 12, 2018

市面上目前已有各种各样的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 用于编写存放组件
...
.

Vue cli3 库模式搭建组件库并发布到 npm的流程

四、配置项目以支持新的目录结构

我们通过上一步的目录改造后,会遇到两个问题。

  1. src 目录更名为 examples ,导致项目无法运行
  2. 新增 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 选项

packages 是我们新增的一个目录,默认是不被 webpack 处理的,所以需要添加配置对该目录的支持。

chainWebpack 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

module.exports = {
 // 修改 src 为 examples
 pages: {
 index: {
 entry: 'examples/main.js',
 template: 'public/index.html',
 filename: 'index.html'
 }
 },
 // 扩展 webpack 配置,使 packages 加入编译
 chainWebpack: config => {
 config.module
 .rule('js')
 .include
 .add('packages')
 .end()
 .use('babel')
 .loader('babel-loader')
 .tap(options => {
  // 修改它的选项...
  return options
 })
 }
}

链式操作

webpack-chain

五、编写组件

以上我们已配置好对新目录架构的支持,接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。

GitHub - 颜色选择器:vcolorpicker

1. 创建一个新组件

  1. 在 packages 目录下,所有的单个组件都以文件夹的形式存储,所有这里创建一个目录 color-picker/
  2. 在 color-picker/ 目录下创建 src/ 目录存储组件源码
  3. 在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。

Vue cli3 库模式搭建组件库并发布到 npm的流程

修改 /packages/color-picker/index.js 文件,对外提供引用。

# /packages/color-picker/index.js
// 导入组件,组件必须声明 name
import colorPicker from './src/color-picker.vue'
// 为组件提供 install 安装方法,供按需引入
colorPicker = function (Vue) {
 Vue.component(colorPicker.name, colorPicker)
}
// 默认导出组件
export default colorPicker

2. 整合所有的组件,对外导出,即一个完整的组件库

修改 /packages/index.js 文件,对整个组件库进行导出。

// 导入颜色选择器组件
import colorPicker from './color-picker'
// 存储组件列表
const components = [
 colorPicker
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
 // 判断是否安装
 if (install.installed) return
 // 遍历注册全局组件
 components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
export default {
 // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
 install,
 // 以下是具体的组件列表
 colorPicker
}

六、编写示例

1、在示例中导入组件库

import Vue from 'vue'
import App from './App.vue'
// 导入组件库
import ColorPicker from './../packages/index'
// 注册组件库
Vue.use(ColorPicker)
Vue.config.productionTip = false
new Vue({
 render: h => h(App)
}).$mount('#app')

2、在示例中使用组件库中的组件

在上一步用使用 Vue.use() 全局注册后,即可在任意页面直接使用了,而不需另外引入。当然也可以按需引入。

<template>
 <colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
</template>

<script>
export default {
 data () {
 return {
 color: '#ff0000'
 }
 },
 methods: {
 headleChangeColor () {
 console.log('颜色改变')
 }
 }
}
</script>

七、发布到 npm,方便直接在项目中引用

到此为止我们一个完整的组件库已经开发完成了,接下来就是发布到 npm 以供后期使用。

1、 package.js 中新增一条编译为库的命令

在库模式中,Vue是外置的,这意味着即使在代码中引入了 Vue,打包后的文件也是不包含Vue的。

Vue Cli3 构建目标:库

以下我们在 scripts 中新增一条命令 npm run lib

  • --target : 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
  • --dest : 输出目录,默认 dist 。这里我们改成 lib
  • [entry] : 最后一个参数为入口文件,默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。
"script": {
 // ...
 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

执行编译库命令

$ npm run lib

Vue cli3 库模式搭建组件库并发布到 npm的流程

2、配置 package.json 文件中发布到 npm 的字段

name
version
description
main
keyword
author
private
license

以下为参考设置

{
 "name": "vcolorpicker",
 "version": "0.1.5",
 "description": "基于 Vue 的颜色选择器",
 "main": "lib/vcolorpicker.umd.min.js",
 "keyword": "vcolorpicker colorpicker color-picker",
 "private": false
 }

3、添加 .npmignore 文件,设置忽略发布文件

我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况。

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

4、登录到 npm

首先需要到 npm 上注册一个账号,注册过程略。

如果配置了淘宝镜像,先设置回npm镜像:

$ npm config set registry http://registry.npmjs.org

然后在终端执行登录命令,输入用户名、密码、邮箱即可登录。

$ npm login

Vue cli3 库模式搭建组件库并发布到 npm的流程

5、发布到 npm

执行发布命令,发布组件到 npm

$ npm publish

Vue cli3 库模式搭建组件库并发布到 npm的流程

6、发布成功

发布成功后稍等几分钟,即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker

Vue cli3 库模式搭建组件库并发布到 npm的流程

总结

以上所述是小编给大家介绍的Vue cli3 库模式搭建组件库并发布到 npm,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
You might like
yii添删改查实例
2015/11/16 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python+os根据文件名自动生成文本
2019/03/21 Python
浅谈Python爬虫基本套路
2019/03/25 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
教师党员承诺书2015
2015/01/21 职场文书
大学生支教感言
2015/08/01 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
如何用PHP实现多线程编程
2021/05/26 PHP
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技