首先在 src 下创立一个 baseComponents
而后创立一个 index.js 在 baseComponents
在 src/baseComponents/index.js 写上面代码
import Vue from 'vue';
// 获取指定目录下的所有组件文件
const components = require.context('./', false, /\.vue$/);
// 遍历组件文件
export default Vue => {components.keys().forEach(fileName => {
// 提取组件名
const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/,'');
// 获取组件选项对象
const componentConfig = components(fileName);
// 全局注册组件
Vue.component(componentName, componentConfig.default || componentConfig);
});
}
还要去 src/main.js 文件写上
import baseComponents from "./baseComponents";
// 注册全局组件
Vue.use(baseComponents);
接下来你就能够在 src/baseComponents 的文件夹外面减少你想要组件了。
比方 src/baseComponents/background.vue
而后在你须要用的中央间接用 <background/> 就能够应用了