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 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
详解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
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python实现Virginia无密钥解密
2019/03/20 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Django缓存Cache使用详解
2020/11/30 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
关于运动会的广播稿
2014/09/22 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
初二英语教学反思
2016/02/15 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Mysql忘记密码解决方法
2022/02/12 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript