Vue cli3 插件开发并发布到 npm

目录

开发配置发布遇到的错误

开发

Vue/cli3开发插件 创建项目并新增目录结构 编写index.js并导出

import vueDialogservice from './dialog/dialog.vue' export default { install: function (Vue) { const vueDialogserviceInstance = Vue.extend(vueDialogservice) let vueDialogserviceInit; const initInstance = () => { // 实例化vue实例 vueDialogserviceInit = new vueDialogserviceInstance(); let vueDialogserviceEl = vueDialogserviceInit.$mount().$el; document.body.appendChild(vueDialogserviceEl); }; // 在Vue的原型上添加实例方法，以全局调用 Vue.prototype.$Dialog = { showDialog(options) { //打开弹出框 if (!vueDialogserviceInit) { initInstance(); } vueDialogserviceInit.showDialog(options) } } } }

配置

package.js配置

"name": "vdialogservice", "version": "0.1.1", "author": "whiteGG", "main": "lib/vdialogservice.umd.min.js", "private": false,

name为组件名，这个必须是唯一的，npm上必须不存在重复的，所以起名字之前先去npm上搜索搜索，以防有相同的，后面发布会报错 private设置为false。 main:入口文件，编译后的包文件 version：修改重新发布时要更改版本否则报错

新增vue-cli3 库模式打包命令，详解

"lib": "vue-cli-service build --target lib --name vdialogservice --dest lib packages/index.js"

执行打包

npm run lib

生成lib包

发布

npm无账号先行注册账号。不过一般在国内我们都是使用的镜像，所以注册账号的时候要注意别注册错误了。

所以这个时候可以安装一个nrm来管理切换不同的源 全局安装nrm

npm install -g nrm

查看源列表

nrm ls

查看当前源地址

nrm current

当前使用淘宝镜像 ’ 切换源

nrm use npm

上述已经切换到npm上了，当然如果不想使用nrm切换，可以在使用npm命令的时候加 -registry=https://registry.npmjs.org/ 例如发布npm publish -registry=https://registry.npmjs.org/,或者直接set npm自己的源，不过这样到时候要用淘宝源又得重新设置，很不好，所以最好的是使用nrm来管理不同的源

1.注册npm账号

npm adduser

2.登录npm

npm login

输入相关信息

3.发布

npm publish

遇到的错误

错误一： 401 Unauthorized - PUT https://registry.npmjs.org/vue-dialog-service --You must be logged in to publish packages

解决：要执行登录npm login

错误二： 403 Forbidden - PUT https://registry.npmjs.org/vue-dialog-service - You do not have permission to publish “vue-dialog-service”. Are you logged in as the correct user? 解决：npm上有存在和你相同的name，请修改package.js中的name

错误三：403 Forbidden - PUT https://registry.npmjs.org/vdialogservice - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit 解决：邮件激活，如果没有激活忘记，可以登录npm再次去激活一次

错误四:403 Forbidden - PUT https://registry.npmjs.org/vdialogservice - You cannot publish over the previously published versions: 0.1.0. 解决：重新发布，package.js中的version要增加

地址-> vDialogService

聊聊代码地址：vue-dialog-service

后记： 在引用的已经上传的插件还需要在main.js引入样式，很麻烦。

import 'vdialogservice/lib/vdialogservice.css'

按照Vue中方式修订

module.exports = { css: { extract: false } }

然后重新发布测试

果然很奏效~

平常心~