vue项目自动导入components

开发项目中一般组件都放在 components 目录下，对于一些高频使用的组件我们需要在入口文件中设置为全局组件，

一个一个搞，很繁琐，这里通过webpack自动挂载components为全局组件。

webpack 提供了 require.context 方法 允许我们自己创建一个上下文，webpack 在构建的时候会解析这些上下文。

目录：

- src

- components/

　　-auto/

　　　　-components1

　　　　　　-index.vue

 

require.context 方法接收四个参数

1. directory 一个文件目录

2. includeSubdirs 是否包含子目录

3. filter 一个正则，用来过滤

4. mode 加载模式

 

使用例子:

// components/index.js
export default function (app) {
    // 创建上下文
    const componentsContext = require.context('./auto', true, /\.vue/); 
    // 调用函数的keys方法获取到指定目录的下面文件路径
    componentsContext.keys().forEach((path) => {
        const componentName = path.split('/')[1].replace('.vue', '');
        // 调用上下文函数，根据path获取到组件函数
        const component = componentsContext(path);
        // 全局挂载
        app.component(componentName, component.default);
    });
}

函数使用：

// main.js
import useAutoComponents from '@/components/index';
const app = createApp(App);
useAutoComponents(app);

然后就可以在组件里面自由使用了