Vue3 组件注册的四种方式，究竟谁更胜一筹？

在 Vue3 的项目开发中，组件化是一个核心特性，它可以让我们将页面拆分成多个小的、可复用的组件，从而提高代码的可维护性和可复用性。而在使用 Vue 组件之前，我们需要先对其进行 “注册”，这样 Vue 才能在渲染模板时找到其对应的实现。本文将详细介绍 Vue3 中四种常见的组件注册方式，希望能帮助你更好地掌握 Vue3 的组件注册技巧。

方式一：全局注册

全局注册是指在项目的入口文件 main.js 或 main.ts 文件中，通过 Vue 提供的 .component() 方法将组件注册为全局组件。一旦组件被全局注册，就可以在任何其他 Vue 组件中直接使用，无需手动导入。

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)

// 全局注册组件
app.component('MyComponent', MyComponent)

app.mount('#app')

方式二：局部注册

局部注册是指在单个 Vue 组件内部使用 import 导入组件并注册，这种方式注册的组件只能在当前组件中使用。

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue'
</script>

方式三：插件注册

插件注册是利用 Vue 的插件机制将一组 Vue 组件注册为全局组件。这种方式适合于一次性注册多个组件，提高代码的复用性和可维护性。

1. MyPlugin.js 中通过 install 方法会向 Vue 应用程序中注册 MyButton，MyInput 自定义组件：

   // MyPlugin.js
   
   // 组件集合对象 <组件名称,组件定义对象>
   const components: Record<string, object> = {
     MyButton,
     MyInput
   }
   
   export default {
     // 在 Vue 应用中注册组件
     install(app: App) {
       Object.keys(components).forEach((name) => {
         app.component(name, components[name])
       })
     },
   }
   

2. 在 main.js 中，通过 app.use(MyPlugin) 将插件注册到应用中，之后就可以在任何地方使用插件中的组件。

   import { createApp } from 'vue'
   import App from './App.vue'
   import MyPlugin from './MyPlugin'
   
   const app = createApp(App)
   
   // 插件注册
   app.use(MyPlugin)
   
   app.mount('#app')
   

方式四：unplugin-vue-components 自动导入组件

unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，它可以自动扫描项目中使用的组件，并在需要的地方自动导入，减少了手动 import 的工作量。同时，它还支持第三方组件库的自动导入，像 Element Plus、Ant Design Vue、Vant 等流行组件库都能轻松适配，并且对 TypeScript 有良好的支持，能自动生成类型声明文件，确保在 TypeScript 项目中类型检查的准确性。

GitHub 项目地址：https://github.com/unplugin/unplugin-vue-components

使用示例

1. 安装 unplugin-vue-components 插件：

   # npm 安装
   npm install unplugin-auto-import --save-dev
   
   # pnpm 安装
   pnpm add -D unplugin-vue-components
   
   # yarn 安装
   yarn add unplugin-vue-components -D
   

2. 在 Vite 项目 vite.config.ts 中添加 unplugin-vue-components 配置：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import Components from 'unplugin-vue-components/vite';
   
   export default defineConfig({
     plugins: [
       vue(),
       // 自动导入组件
       Components({
         dirs: ['src/components'],
       }),
     ],
   });
   

3. 在完成 unplugin-vue-components 的配置后，就可以在项目中直接使用组件，无需手动导入：

   <template>
     <div>
       <MyButton />
     </div>
   </template>
   
   <script setup>
   // 无需手动导入MyButton组件
   </script>
   

   如果配置了第三方组件库的解析器，例如 ElementPlus，也可以直接使用 ElementPlus 的组件：

   <template>
     <div>
       <el-button type="primary">Element Plus按钮</el-button>
     </div>
   </template>
   
   <script setup>
   // 无需手动导入ElButton组件
   </script>
   

   这样，unplugin-vue-components插件会自动识别并导入项目中使用的组件，大大简化了组件的使用过程。

配置项说明

unplugin-vue-components 插件的配置项如下：

1. dirs：组件扫描目录，指定需要扫描的组件目录路径（相对路径），默认值为['src/components']，也可以同时指定多个目录：

   // 扫描多个目录
   dirs: ['src/components', 'src/views/shared']
   

2. extensions：文件扩展名匹配，指定需要识别的组件文件扩展名，默认仅支持.vue文件。如果项目中使用了其他类型的组件文件，可以在这里进行配置：

   // 同时支持 .vue、.jsx 和 .tsx 文件
   extensions: ['vue', 'jsx', 'tsx']
   

3. globs：文件匹配模式，使用 Glob 模式精确匹配组件文件，指定后将忽略dirs、extensions和directoryAsNamespace选项：

   // 仅扫描 src/components 目录下的 .vue 文件
   globs: ['src/components/*.vue']
   
   // 使用以 ! 开头的负匹配模式排除某些组件不被注册
   globs: ['src/components/**/*.vue', '!src/components/**/*.test.vue']
   

4. deep：递归扫描子目录。默认值为true，插件会递归地搜索指定目录下的所有子目录；如果设置为 false，则只搜索指定目录的一级文件：

   // 关闭子目录扫描
   deep: false
   

5. resolvers：配置第三方组件库组件的自动导入解析器。当需要自动导入第三方组件库的组件时，就需要使用这个选项：

   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   resolvers: [
     ElementPlusResolver(),  // 自动导入 ElementPlus 组件
   ]
   

   常用的第三方组件库解析器有：

   • Element Plus：ElementPlusResolver
   • Ant Design Vue：AntDesignVueResolver
   • Vant：VantResolver
   • Vuetify：VuetifyResolver
   • Headless UI：HeadlessUiResolver

6. dts：是否生成全局声明文件 components.d.ts，默认在安装 TypeScript 时启用。如果项目使用了 TypeScript，生成的类型声明文件可以帮助编辑器提供更准确的代码提示和类型检查。

   // 关闭类型声明文件生成
   dts: false,
   
   // 自定义类型声明文件路径
   dts: 'src/types/components.d.ts',
   

7. directoryAsNamespace：将目录结构作为组件命名空间前缀。

   // 启用命名空间
   directoryAsNamespace: true
   
   // 组件路径：src/components/admin/Button.vue
   // 使用方式：<AdminButton />
   

8. collapseSamePrefixes：是否折叠目录和组件的相同前缀以避免命名重复（区分大小写）。

   // 目录结构：src/components/admin/AdminButton.vue
   // 折叠后：<AdminButton /> 而非 <AdminAdminButton />
   collapseSamePrefixes: true
   

9. globalNamespaces：指定应忽略的目录前缀作为全局命名空间。

   // 组件路径：src/components/admin/Button.vue
   // 全局命名空间：['admin']
   // 使用方式：<Button /> 而非 <AdminButton />
   globalNamespaces: ['admin']
   

10. directives：是否自动导入指令，Vue 3默认启用，Vue 2默认禁用（需Babel支持）。

    // 启用Vue 2指令支持（需安装@babel/parser）
    directives: true
    

11. importPathTransform：自定义导入路径的转换函数。

    // 添加自定义前缀
    importPathTransform: (path) => `@/components/${path}`
    

12. allowOverrides：是否允许同名组件覆盖，默认禁止。

    // 允许同名组件覆盖
    allowOverrides: true
    

13. include：匹配需要处理的文件。支持正则表达式匹配。

    include: [/\.vue$/, /\.vue\?vue/, /\.vue\.[tj]sx?\?vue/],
    

14. exclude：排除不需要处理的文件。支持正则表达式匹配。

    exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
    

15. excludeNames：排除特定名称的组件，用于处理插件无法自动检测的冲突。

    // 排除所有以Async开头的组件
    excludeNames: [/^Async.+/]
    

16. version：指定项目的 Vue 版本，未指定时自动检测。

    // 明确指定Vue 3版本
    version: 3
    

17. types：提供库中（全局注册）的组件类型。

    // 为Element Plus组件提供类型支持
    types: [{ from: 'element-plus', names: ['ElButton', 'ElInput'] }]