總體分為2個步驟

一，先寫好外掛

二，釋出到npm上面

一，寫vue外掛

vue有一個開放的方法install，在vue外掛需要寫在這個方法裡面，在vue官網，裡面說的很清楚，這個方法裡面可以是全域性方法，可以是指令還可以是掛載在原型的方法。

而vue在使用外掛時候，需要首先use。

寫好外掛之後需要應用webpack打包。然後將程式碼統一推送到npm上面就可以了。

二，釋出到npm上面

1）首選需要有個npm註冊賬號，這個可以直接在npm官方註冊

2）在cmd上面切換路徑到打包好的vue外掛目錄

3）在cmd上面執行 npm adduser命令，這個時候會需要輸入前面申請的username和password

4）執行npm publish即可

5）每次推送需要修改package.json的版本號，每次的版本號不能與前面相同

三，具體案例

寫了小案例vue-toast-zhensg

1）vue元件程式碼

<template>
    <section class="toast-container">
        <div class="toast" v-bind:class="[visible?'fade-in':'fade-out']">
            <span>{{message}}</span>
        </div>
    </section>
</template>
<style lang="scss">
    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: scale(0.7);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes fade-out {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.7);
        }
    }
    .toast-container{
        position: absolute;
        left: 0;
        top:0;
        bottom: 0;
        right:0;
        z-index: 2000;
        display: flex;
        justify-content: center;
        align-items: center;
        .fade-in{
            animation-name: fade-in;
            animation-duration: 0.5s;
            animation-fill-mode: both;
        }
        .fade-out{
            animation-name: fade-out;
            animation-duration: 0.5s;
            animation-fill-mode: both;
        }
        .toast{
            width: 180px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: black;
            color: white;
            border-radius: 13px;
        }
    }
</style>
<script>
    export default{
        data(){
            return{
                message:'hello,Vue-toast',
                visible:true
            }
        }
    }
</script>

2）js部分，也就是外掛功能部分程式碼

import ToastComponent from './vue-toast.vue'
//凡是vue外掛一定有這個方法。目的是use使用，才能被use引用
let install = function (Vue,options) {
        var opt={
            duration:3000
        }
        
        for(var key in options){
            opt[key]=options[key];
        }
    //掛載在原型上  使用的時候this.$toast
    Vue.prototype.$toast = function (message,option) {
        
        if(typeof option=="object"){
            for(var key in option){
                opt[key]=option[key];
            }
        }
        //Vue.extend可以繼承這個元件，然後得到一個新的元件
        const ToastController = Vue.extend(ToastComponent);
        //建立一個新的例項，例項掛載在一個空的div
        var instance = new ToastController().$mount(document.createElement("div"));
        
        instance.message = message;
        instance.visible = true;
        document.body.appendChild(instance.$el); //將div新增到dom中
        setTimeout(()=>{
            instance.visible = false;
            setTimeout(()=>{
                document.body.removeChild(instance.$el)
            },500)
        },6000)
    }
    Vue.prototype.$toast['show'] = function (message,option) {
        return Vue.prototype.$toast(message,option);
    }
}
export default install;

3）webpack打包程式碼

var path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'vue-toast.js',
        libraryTarget: "umd",  //一套完整的規範 cmd  amd 
        library: 'VueToast'  //庫的名字
    },
    module:{
        rules:[
            {
               test:/\.js$/,
               loader:'babel-loader',
               include:path.join(__dirname,'src'),
               exclude:/node_modules/,
            },
            {
                test:/\.vue$/,
                loader:'vue-loader',
                include:path.join(__dirname,'src'),
                exclude:/node_modules/,
                options:{
                    loaders:{
                        scss:'style-loader!css-loader!postcss-loader!sass-loader'
                    },

                }
            }
        ]
    },
    plugins: [
    ]
}

4）package.json程式碼 main的路徑必須是打包好的路徑

{
  "name": "vue-toast-zhensg",
  "version": "1.0.5",
  "description": "",
  "main": "dist/vue-toast.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4",
    "webpack": "^3.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.11",
    "node-sass": "^4.5.3",
    "postcss": "^6.0.6",
    "postcss-loader": "^2.0.6",
    "postcss-modules-local-by-default": "^1.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.3.4"
  },
  "_from": "[email protected]",
  "_resolved": "http://registry.npm.taobao.org/vue-toast-zhensg/download/vue-toast-zhensg-1.0.0.tgz"
}

5）我釋出的npm外掛路徑：https://www.npmjs.com/package/vue-toast-zhensg

以上很簡單的一個外掛。