九、制作vue插件

比如，components中会有一系列已经写好的组件，然后，新建一个index.js管理所有的组件

import Vue from 'vue'
function changeStr(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}

const requireComponent= require.context('./', false, /\.vue$/)

// 将组件注册为插件
const install = (Vue) => {
    if (install.installed) return
    requireComponent.keys().forEach(fileName => {
        const currentCom = requireComponent(fileName)
        const defaultComName = 'Mz' + changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/,''))
        const comName = currentCom.default.name || defaultComName
        Vue.component(comName, currentCom.default || currentCom)
    })
}

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

在main.js 中测试

import MzUi from './common/global.js' // 引入所有组件
Vue.use(MzUi) // 就可以使用组件库

在组件库的package.json 中设置打包的命令行和入口文件

"main": "lib/official-web.umd.min.js"
"scripts": {
     "lib": "vue-cli-service build --target lib --name mz-ui --dest lib src/common/global.js"
 }

最后，通过npm publish 发布到npm官网