自定义vue插件&发布到npm

1.类似构件components，进行插件编写，注意的是插件必须定义name

2.然后在插件文件夹中定义index.js用于统一注册插件

//index.js
const requireComponent = require.context('./',true,/\.vue$/)

//插件
const install = (vue)=>{
    if(install.installed) return
    install.installed
    requireComponent.keys().forEach(fileName=>{
    //第i个组件
    const config = requireComponent(fileName)
    //组件名
    const componentName = config.default.name
    Vue.component(componentName,config.default||config)
    
    });
    Vue.directive('focus',{
        inserted:function(el){
            el.focus()
        }
    })
}

//环境监测
if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue)      
}

export default{
    install
}

配置项目的package.json文件

"name": "vue-msg-xxx", //不能带数字，否则会发布npm失败
"version": "0.0.1",
"private": false,
"license": "MIT",
"description": "描述",
"":""
……
"script":{
    ……
    "lib": "vue-cli-service build --target lib --name vue-msg-xxx --dest lib src/plugins/index.js"
}

配置好后：npm run lib，生成lib文件夹，其中有个min.js文件，需要在package.json中配置main发布npm包的入口文件

……
"description": "xxx",
"main": "lib/vue-msg-xxx.umd.min.js",
……

然后登陆npm: npm login

再通过：npm publish发布到npm