Vue cli3 库模式搭建组件库并发布到 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 为 examplespages: {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
- 创建一个新组件
在 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.install = function (Vue) {Vue.component(colorPicker.name, colorPicker)}// 默认导出组件
export default colorPicker
整合所有的组件,对外导出,即一个完整的组件库
修改 /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 = falsenew 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.json 中新增一条编译为库的命令
在库模式中,Vue是外置的,这意味着即使在代码中引入了 Vue,打包后的文件也是不包含Vue的。
Vue Cli3 构建目标:库
以下我们在 scripts 中新增一条命令 npm run lib
–target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
–dest : 输出目录,默认 dist。这里我们改成 lib
[entry]: 最后一个参数为入口文件,默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。
“scripts”: {
// …
“lib”: “vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js”
}
执行编译库命令
$ npm run lib
2、配置 package.json 文件中发布到 npm 的字段
name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
version: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
description: 描述。
main: 入口文件,该字段需指向我们最终编译后的包文件。
keyword:关键字,以空格分离希望用户最终搜索的词。
author:作者
private:是否私有,需要修改为 false 才能发布到 npm
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
7、使用新发布的组件库
安装
$ npm install vcolorpicker -S
使用# 在 main.js 引入并注册
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)# 在组件中使用
<template><colorPicker v-model="color" />
</template>
<script>export default {data () {return {color: '#ff0000'}}}
</script>
Vue cli3 库模式搭建组件库并发布到 npm相关推荐
- 用vue搭建组件库的流程
目录 一.项目介绍 二.用脚手架生成vue项目 三.修正项目结构 四.跑通一个demo 五.卡片组件的设计与代码编写 六.测试组件的功能 七.前端模块化 八.webpack打包js文件 九.Gulp打 ...
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库 杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- 基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表
说明 经过上阶段的配置虽然可以在项目中使用 mdx 语法 来创建页面了,但是我们的组件库有一些定制化的需求:交互式的组件演示.组件 Props 列表展示.这些功能如果可以通过封装来实现,会大大提升开发 ...
- 基于 next.js + mdx 搭建组件库文档项目(一) -- 开发环境搭建
说明 之前使用过 Docz 来作为组件库文档搭建工具,它基于 gatsby , 提供了高度的定制化能力,但是截止 2021-06-22, Docz 停留在 v2.3.1(2020-04-05) 已经一 ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
最新文章
- 逻辑回归算法原理简介
- 无线网卡实现AP 热点功能,共享Internet连接设置
- Java动态excel模板
- 编程语言对比 数组
- 多媒体计算机软件系统课件,《多媒体计算机系统》PPT课件.ppt
- 计算机360u盘删除,怎么关闭360U盘小助手
- KEILC51的下载和安装与工程建立
- 慧编程python硬件_什么是慧编程?慧编程介绍
- 【华为OD机试真题 JS】数字涂色
- 顺丰旗下丰鸟无人机高薪诚聘海内外英才
- 《Tableau数据可视化从入门到精通》之读取PDF文件数据
- 微软因果推理的框架DoWhy github 介绍
- 智能财税服务商“融易算”完成数千万元天使轮融资...
- go (golang) DNS域名解析实现
- 脚本小子进阶之路(一)用开源武装自己
- 你一定还不知道还有这么有意思的网站!感觉不是一般的皮!
- Python数据分析与可视化——NumPy数组
- python变量的赋值_python变量赋值|变量赋值
- 【程序设计】C语言初学者常犯的17条错误
- ppt提示内存或系统资源不足_存储空间不足无法处理此命令是什么原因?内存够却提示空间不足...
热门文章
- C# 注册根目录dll ocx 代码实现
- 如何在 GitHub 上靠私活赚钱?
- 后台添加商品和添加到购物车
- c语言用一维数组求十个数和,c语言 .从键盘输入10个整数,存到一维数组中,并求这10个整数的和?...
- onCreate(Bundle savedInstanceState)
- java计算机毕业设计云端小区物业智能管理系统MyBatis+系统+LW文档+源码+调试部署
- 计算机等级缩写,笔记本报价单常见缩写字典
- php日志 monolog,Laravel 集成的 Monolog 库对日志进行配置和记录实例
- SpringCloud读取Nacos中的配置文件
- mapGetters 辅助函数