发布vue插件到npm上

Posted 2021-01-17 zhensg123

总体分为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

以上很简单的一个插件。