我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来,然后在main.js文件中引入global.js的文件。
global.js内容
import Vue from 'vue'
function changeStr(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('../components/', false, /\.vue$/) // 可修改文件的路径位置
// 查找同级目录下以vue结尾的组件
const install = () => {
console.log(requireComponent, 'requireComponent');
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName)
// console.log(config) // ./child1.vue 然后用正则拿到child1
let componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
Vue.component(componentName, config.default || config)
})
}
export default {
install // 对外暴露install方法
}
main.js内容
import global from './utils/global'; // 组件全局使用
Vue.use(global);
组件内即可直接使用。