vue 生成发布包_手摸手带你发布一个基于vue插件的npm包

前言：npm是随nodeJS一起安装的包管理器工具，方便于应用的依赖管理。用户可以从npm服务器下载依赖包，也可以将自己编写的包上传到npm仓库共享使用。

1.准备工作

注册一个npm账号

2. 本地创建npm 项目包

mkdir vue-npm-pkg

cd vue-npm-pkg

npm init -y

3. 完善package.json信息

name：包名

version：版本

description：描述

main:包入口

scripts：npm运行脚本

keywords:搜索关键字

author：作者(建议写npm账号或者github账号)

license：开源协议

dependencies：依赖

4. 创建必要文件

touch index.js vue-npm-pkg.vue test.vue

Index.js: 包入口文件，导出包

vue-npm-pkg.vue ： vue插件包业务组件

test.vue ：测试组件，用于测试 vue-npm-pkg插件包

目录如下：

index.js 代码如下：

vue-npm-pkg.vue 代码如下:

test.vue 就是使用插件的事例代码：

5. 启动本地项目

现在要想让 test.vue跑起来，我们还需安装 vue-cli：

1. npm install -g @vue/cli-service-global

2. vue serve test.vue (可封装进package.json脚本中如下图：)

现在我们 npm run dev 让test.vue跑起来，如能看到如下显示那就真的恭喜你了

6. 发布插件

测试完毕，我们现在开始发布插件包

1) 、npm login 根据提示输入用户名和密码

2) 、npm publish 发布插件

PS:

发布插件前请去 https://www.npmjs.com/ 搜索确认是否存在了同名的包，如果已经存在，很遗憾你要修改你的包名

每次更新包(发布新版本)必须要修改package.json中的version,不然会报错，当然聪明的你肯定不会真的去package.json中每次手动修改version。幸好，npm有其版本管理命令。

MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号

npm version major # 大版本号加 1，其余版本号归 0

npm version minor # 小版本号加 1，其余版本号归 0

npm version patch # 修订号加 1

所以每次从重新发布的命令变成 npm version patch && npm publish

当然了，聪明的你可能又想到了，何不封装进package.json脚本中，于是,类似于“rp”:”npm version patch && npm publish”的脚本命令应运而生。

7. 使用插件

在任何支持es6语法的项目中

import vueNpmPkg from 'vue-npm-pkg'

Import Vue from 'vue'

Vue.use(vueNpmPkg)

8. 删除npm包

删除指定的版本 npm unpublish 包名@版本

删除整个包 npm unpublish 包名 --force 删除之前会有警告提示