Vue cli3 库模式搭建组件库并发布到 npm
栏目: JavaScript · 发布时间: 6年前
内容简介:市面上目前已有各种各样的UI组件库,比如所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下。以下一个简单的颜色选择器插件
市面上目前已有各种各样的UI组件库,比如 Element
和 iView
,他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了。
所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下。
以下一个简单的颜色选择器插件 vColorPicker
讲述从开发到上线到npm的流程。
一、技术栈
如何通过新版脚手架创建项目,这里就不提了,自行看官方文档。
- Vue-cli3: 新版脚手架的库模式,可以让我们很轻松的创建打包一个库
- npm:组件库将存放在npm
- webpack:修改配置需要一点 webapck 的知识。
二、大纲
想要搭建一个组件库,我们必须先要有一个大概的思路。
- 规划目录结构
- 配置项目以支持目录结构
- 编写组件
- 编写示例
- 配置使用库模式打包编译
- 发布到npm
三、规划目录结构
1、创建项目
在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择。
$ vue create . 复制代码
2、调整目录
我们需要一个目录存放组件,一个目录存放示例,按照以下方式对目录进行改造。
. ... |-- examples // 原 src 目录,改成 examples 用作示例展示 |-- packages // 新增 packages 用于编写存放组件 ... . 复制代码
四、配置项目以支持新的目录结构
我们通过上一步的目录改造后,会遇到两个问题。
-
src
目录更名为examples
,导致项目无法运行 - 新增
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 }) } } 复制代码
五、编写组件
以上我们已配置好对新目录架构的支持,接下来我们尝试编写组件。以下我们以一个已发布到 npm 的小插件作为示例。
GitHub - 颜色选择器:vcolorpicker
1. 创建一个新组件
- 在
packages
目录下,所有的单个组件都以文件夹的形式存储,所有这里创建一个目录color-picker/
- 在
color-picker/
目录下创建src/
目录存储组件源码 - 在
/color-picker
目录下创建index.js
文件对外提供对组件的引用。
修改 /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的。
以下我们在 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 复制代码
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 复制代码
5、发布到 npm
执行发布命令,发布组件到 npm
$ npm publish 复制代码
6、发布成功
发布成功后稍等几分钟,即可在 npm 官网搜索到。以下是刚提交的 vcolorpicker
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 搭建CocosCreator组件库
- react 组件库搭建记录
- 可视化搭建平台的地图组件和日历组件方案选型
- Android组件化入门:一步步搭建组件化架构
- Android组件化框架搭建
- 【手牵手】搭建前端组件库(一)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品经理必懂的技术那点事儿
唐韧 / 电子工业出版社 / 2017-1 / 59
《产品经理必懂的技术那点事儿》以非技术背景产品经理了解技术为主题,将技术知识以简单并且易于理解的方式讲述出来,帮助非技术背景产品经理了解技术、学习技术,旨在帮助产品经理高效地与技术人员进行沟通与合作。 《产品经理必懂的技术那点事儿》的主要内容围绕产品经理需要了解的互联网基础技术知识展开,涉及客户端、服务器端、数据库及一些数据处理知识。同时,还就产品经理需具备的一些软实力,例如沟通能力和解决问......一起来看看 《产品经理必懂的技术那点事儿》 这本书的介绍吧!