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
    }
}

然后重新发布测试

果然很奏效~

平常心~