首先在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/>就能够应用了
发表回复