基于 Vue.js
的公共组件仓库,使用 webpack 搭建一个 library 脚手架可以参考这个仓库的源码。
npm i hbf-public-components --save-dev
yarn add hbf-public-components -D
将打包后的文件放到自己的 CDN 上面,然后引入
<script src="https://你的CDN地址/hbf.min.js"></script>
<script>
console.log(window.Hbf) // 打印你导出的对象
</script>
// main.js
import Vue from 'vue'
import hbf from 'hbf-public-components'
Vue.use(hbf) // 会执行hbf的install方法,内部全部组件全局注册
首先安装babel-plugin-import
yarn add babel-plugin-import -D
配置.babelrc
"plugins": [
["import", {
"libraryName": "hbf-public-components",
"libraryDirectory": "lib/components"
}]
]
使用webpack-bundle-analyzer
可以查看模块按需引入的打包依赖图。
<template>
<public-menu :data="xxx">
</public-menu>
</template>
import { publicMenu } from 'hbf-public-components'
export default {
components: {
publicMenu,
},
}
参考 组件编写约定