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

然後重新發布測試

果然很奏效~

平常心~