使用脚手架新建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"
- 按需加载需要引入插件