vue-cli 3.x 开发插件并发布到 npm
为了摆脱咸鱼的身份,我给自己定了一个开源项目的目标
于是抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题
之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改
但升级到 vue-cli 3.x 之后,反而一脸懵逼。。。
在踩了一天的坑之后,终于成功发布了一个小插件,于是记个笔记
一、调整项目结构
首先用 vue-cli 创建一个 default 项目
// 顺便安利一篇文章《Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目》
当前的项目目录是这样的:
首先需要创建一个 packages 目录,用来存放组件
然后将 src 目录改为 examples 用作示例
二、修改配置
启动项目的时候,默认入口文件是 src/main.js
将 src 目录改为 examples 之后,就需要重新配置入口文件
在根目录下创建一个 vue.config.js 文件
// vue.config.js module.exports = {
// 将 examples 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'examples/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}
完成这一步之后就可以正常启动项目了
vue-cli 3.x 提供了构建库的命令,所以这里不需要再为 packages 目录配置 webpack
三、开发组件
之前已经创建了一个 packages 目录,用来存放组件
该目录下存放每个组件单独的开发目录,和一个 index.js 整合所有组件,并对外导出
每个组件都应该归类于单独的目录下,包含其组件源码目录 src,和 index.js 便于外部引用
这里以 textarea 组件为例,完整的 packages 目录结构如下:
textarea/src/main.vue 是组件的开发文件,具体代码这里就不展示了
需要注意的是,组件必须声明 name,这个 name 就是组件的标签
textarea/index.js 用于导出单个组件,如果要做按需引入,也需要在这里配置
// packages/textarea/index.js // 导入组件,组件必须声明 name
import Textarea from './main.vue' // 为组件添加 install 方法,用于按需引入
Textarea.install = function (Vue) {
Vue.component(Textarea.name, Textarea)
} export default Textarea
四、整合并导出组件
编辑 packages/index.js 文件,实现组件的全局注册
// packages / index.js // 导入单个组件
import Textarea from './textarea/index' // 以数组的结构保存组件,便于遍历
const components = [
Textarea
] // 定义 install 方法
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 遍历并注册全局组件
components.map(component => {
Vue.component(component.name, component)
})
} if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
} export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}
到这里组件就已经开发完毕
可以在 examples/main.js 中引入该组件
import TagTextarea from '../packages/index'
Vue.use(TagTextarea)
然后就能直接使用刚才开发的 textarea 组件
组件的标签就是组件内定义的的 name
这时候可以 npm run serve 启动项目,测试一下组件是否有 bug
// 启动前需要确保已经在 vue.config.js 中添加了新入口 examples/main.js
五、打包组件
vue-cli 3.x 提供了一个库文件打包命令
主要需要四个参数:
1. target: 默认为构建应用,改为 lib 即可启用构建库模式
2. name: 输出文件名
3. dest: 输出目录,默认为 dist,这里我们改为 lib
4. entry: 入口文件路径,默认为 src/App.vue,这里改为 packages/index.js
基于此,在 package.json 里的 scripts 添加一个 lib 命令
// pageage.json {
"scripts": {
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
}
}
然后执行 npm run lib 命令,编译组件
六、准备发布
首先需要在 package.json 添加组件信息
name: 包名,该名不能和已有的名称冲突;
version: 版本号,不能和历史版本号相同;
description: 简介;
main: 入口文件,应指向编译后的包文件;
keyword:关键字,以空格分割;
author:作者;
private:是否私有,需要修改为 false 才能发布到 npm;
license:开源协议。
然后创建 .npmignore 文件,设置忽略文件
该文件的语法和 .gitignore 的语法一样,设置发布到 npm 时忽略哪些目录或文件
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html # local env files
.env.local
.env.*.local # Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log* # Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
七、发布到 npm
如果以前改过 npm 的镜像地址,比如使用了淘宝镜像,就先改回来
npm config set registry http://registry.npmjs.org
如果没有 npm 账户,可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册
如果在官网注册的账户,或者以前就有账户,就使用 npm login 命令登录
具体流程可以参考官方文档(谷歌浏览器->翻译中文)
在发布之前,一定要确保组件已经编译完毕,而且 package.json 中的入口文件(main)的路径正确
一切就绪,发布组件:
npm publish
emmmmmm....
本来到这里就该结束了
不过我想一定有人好奇,文中 textarea 组件到底是啥(我一点也不好奇)
那就戳这里 -> vue-tag-textarea
// 恬不知耻的求星星...
vue-cli 3.x 开发插件并发布到 npm的更多相关文章
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
- 开发vue插件并发布到npm包管理工具的流程
1-10是开发流程,后面的是发布流程 1. 在Git里面…新建项目 2. 克隆项目到本地用来开发 git clone https://github.com/***/vue-prevent-brow ...
- vue-cli 3.x 自定义插件并发布到 npm
干货转载——https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html 全是知识点呐 赶紧记下来啊 一.调整项目结构 首先用 ...
- 80行代码教你写一个Webpack插件并发布到npm
1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...
- [Vue CLI 3] 配置 webpack-bundle-analyzer 插件
首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...
- Vue Cli 移动端开发
一.
- 封装插件并发布到npm的历程
1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了
- 如何从0开发一个Vue组件库并发布到npm
1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...
随机推荐
- Kali学习笔记24:Nikto、Skipfish
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 实验环境: Kali机器IP:192.168.163. ...
- ueditor编辑器显示style标签样式
在使用ueditor编辑器中,想保存style标签的样式需要对js配置文件进行修改.官方为了安全考虑,默认会将style标签转为DIV标签,导致样式不能显示出对应的效果. 基于1.4.3版本修改如下 ...
- 增删改查Spring+MyBatis
其实这次写这个增删改查,我的收获很大,在同学的帮助下和老师的推动下,我也是学会了很多的技能点. 1.显示数据 显示数据对我而言可以说很好做,因为我以前增删改查做了有N遍,但是我却每次都是无功而返,半途 ...
- 网页的异步请求(Ajax)
JS原生Ajax操作(XMLHttpRequest) GET请求 var xmld=new XMLHttpRequest(); xmld.open("GET","wan. ...
- 协议—IIC
I2C总线支持任何IC生产过程NMOS CMOS双极性,两线――串行数据 SDA 和串行时钟SCL线在连接到总线的器件间传递信息,每个器件都有一个唯一的地址识别,无论是微控制器.LCD 驱动器.存储器 ...
- 给大家一些改善 Python 程序的 91 个建议
读了一本还不错的书「编写高质量代码改善 Python 程序的 91 个建议」,大多数的建议是真心不错,我虽然写python也有3年多了,但是有些地方确实没去注意过,特地整理了一下,给大家参考. 我已经 ...
- HW2018校招软件类笔试题
一. 1.题目 输入一个字符串,输出字符串中最长的数字串.如果有多个数字串长度相等且都是最长的,则按照字符串顺序输出最后一个最长的数字串. 2.解答 [code] import java.util.* ...
- Vue-router导航问题
现在的项目,用的是Vue,但当时用的时候,是边学边做的,上手确实比较简单,但是已经用Vue写了一个项目了,但是感觉对Vue的还是不是很深刻,用的都是比较简单的API, 现在回头看看,有些东西,非常的精 ...
- nginx入门教程
nginx入门教程 一.概述 什么是nginx? Nginx (engine x) 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向 ...
- [Jenkins]Jenkins构建时提示java.io.IOException: No space left on device
突然发现Jenkins的Job全部都停了,打开Jenkins发现所有的slave机器,均提示: 点开Dead(!),提示Thread has died,如下图: 看图好像说是Jenkins所在的服务器 ...