开发Vue组件库

使用脚手架新建vue项目（以button 组件为例）
1.新建package 文件夹，添加index.js 、custombutton 文件夹，custombutton 中 添加
custombutton .vue
index.js

<template>
  <div>
    button
  </div>
</template>

<script>
export default {
  name: 'custombutton '
}
</script>

<style>
</style>

import custombutton from './custombutton .vue';
// 此处为按需加载使用
canvasBroad.install = Vue => Vue.component(canvasBroad.name, canvasBroad);//注册组件

export default custombutton 

packages/index.js

import custombutton from './custombutton/index ' 

// 存储组件列表
const components = [
    custombutton
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    ...components
}

在package.json 添加

"lib": "vue-cli-service build --target lib --name custom --dest lib packages/index.js"