使用情景:
有多个频繁使用的组件 需要进行全局注册
可以将这些组件都放在components下同一个文件夹下,在此文件夹中建立 一个js文件 代码如下:
import Vue from 'vue';
// 修改文件名首字母大写
function changeComponentName (str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
// 获取当前文件夹下的的组件
// require.context 三个参数 第一个表示读取文件的路径 第二个表示是否遍历文件的子目录 第三个表示匹配的文件的正则
const requireComponent = require.context('.', false, /\.vue$/);
requireComponent.keys().forEach(fileName => {
const config = requireComponent(fileName);
const componetName = changeComponentName(
// 去掉开头 ./ 以及后面.vue
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
);
Vue.component(componetName, config.default || config);
})最后一步 : 在main.js中引入 当前的js文件, 即可全局使用
