vue3 自动引入自定义组件

在使用Vue3开发项目过程中，经常用到自定义组件。有些组件需要多处使用，这个时候我们就可以考虑将其组件定义为全局组件。为了减少代码的冗余，我们可以实现相应的方法使其自动引入。

全局组件的文件夹

创建存放全局组件的文件夹，让我们的代码更规范，也让我们下面实现自动引入方法更简单一些。我们创建一个src/components文件夹，然后在该文件夹下创建一个com文件夹，用来存放全局组件。下面实现了一个全局组件demo-com，我们将其放在src/components/com文件夹下。

<template>
  <div class="demo-com">
    全局组件引用 demo
  </div>
</template>

自动引入全局组件代码实现

1. 创建一个src/utils/globalComponent.ts文件，用来实现自动引入全局组件。

//处理首字母大写 abc => Abc
function changeStr(str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function globalCom(app: any) {
  // 引入全局组件
  const requireComponent = require.context(
    "@/components/com/",
    false,
    /\.vue$/
  );
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const config = requireComponent(fileName);
    // 获取组件名
    const componentName = changeStr(
      fileName.replace(/^\.\//, "").replace(/\.\w+$/, "")
    );
    // 注册全局组件
    app.component(componentName, config.default || config);
  });
}

export default globalCom;

2. 在main.ts文件中引入globalComponent方法，并调用。

import { createApp } from "vue";  
import App from "./App.vue";  
import globalCom from "@/utils/globalComponent";

const app = createApp(App);
globalCom(app);

app.mount("#app");

3. 测试，在Home.vue中使用全局组件demo-com。直接引入即可，无需再components中注册。

<template>
  <div class="home">
    ......
    <demo-com></demo-com>
  </div>
</template>

源码下载:https://gitee.com/leolee18/vue3-project

系列文档

vue3 两种创建方式详解(cli和vite)
vue.config.js/vite.config…
vue3 自动引入自定义组件
vueX vue3自动引入匹配的modules
vue3 自定义指令控制按钮权限的操作
vuex与axios网络请求解耦
移动端rem适配布局