关于vite中自动引用组件unplugin-vue-components在vue/cli中的使用

unplugin-vue-components可以在插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；

像之前我们都习惯使用全局引入或者局部引入，在main.js中或者需要用到的组件中一个个进行引入

import { Button } from 'ant-design-vue

使用此插件后，不需要手动编写import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。

一、安装插件

首先，确保你的项目中已经安装了 vue-loader，因为 unplugin-vue-components 依赖于它

// 如果没有，得先进行安装vue-loader
npm install vue-loader vue-template-compiler --save-dev


npm install -D unplugin-vue-components

• vue-loader 是一个 webpack 的 loader，专门用于解析和转换 Vue 单文件组件（.vue 文件）。

二、vue.config.js中进行配置

由于博主是在vue-cli中进行使用的，所以在vue.config.js中进行配置

    
    plugins: [
      // 这行代码是通过 require 导入 unplugin-vue-components 插件
      // 并且使用了 webpack 的模式
      require("unplugin-vue-components/webpack")({
        // directoryAsNamespace这个选项告诉插件将目录结构作为组件的命名空间，
        // 这意味着你可以按目录结构组织组件，并且不需要显式地指定命名空间。
        // 也就是你不需要再指定对应的“component.d.ts”文件
        directoryAsNamespace: true,
        // 这是一个解析器数组，用于解析组件的导入名称。
        // 当你放置的组件满足这个规则的时候，就会执行里面的方法
        resolvers: [
          // ElementUiResolver(),
          // ViewUiResolver(),
          (name) => {
            // 如果组件是以IconPark开头的且后面紧跟大写字母开头的组件名称，则执行下面的方案
            if (name.match(/^IconPark[A-Z]/)) {
              // icon-park
              // 去掉 IconPark 的前缀，只保留组件名部分
              name = name.slice(8);
              // 返回一个对象，指定组件的名称和从哪里导入组件。
              // 在这里，它会导入 @icon-park/vue 中的组件。
              // 例如：使用类似 IconParkSearch 这样的组件时，
              // 实际上会自动导入 @icon-park/vue 库中的 Search 组件
              return {
                name,
                from: "@icon-park/vue",
              };
            }
          },
        ], // 组件
      }),
    ],

三、jsconfig.js中配置

配置完成后，运行代码，会在项目根目录自动生成一个components.d.ts文件;

并且需要再jsconfig.js中进行再次配置：

{

  "compilerOptions": {
    // 指定了解析非相对导入模块时的基础目录，
    // 同样是相对于 jsconfig.json 文件所在的当前目录。
    "baseUrl": "./",
    // 定义了模块名到基础目录路径的映射
    "paths": {
      // "@/*"定义了component.d.ts中，可以使用任何名字来定义对应组件，并使用该名字来调用
      // ["src/*"]你可以在代码中使用 @/ 开头的路径来引用 src/ 目录下的文件
      "@/*": ["src/*"]
    }
  },
   // 告诉编辑器排除哪些文件或目录不进行处理。
   // 在这里，同样排除了 node_modules 和 dist 目录，以便编辑器忽略这些文件和目录
  "exclude": ["node_modules", "dist"]
}

• JavaScript 项目：如果你的项目是纯粹的 JavaScript 项目（没有 TypeScript 文件），那么你应该使用 jsconfig.json 文件来配置项目。

• "baseUrl": "./":

  • 指定了解析非相对导入模块时的基础目录，同样是相对于 jsconfig.json 文件所在的当前目录。

• 路径映射：通过 paths 字段，你可以使用别名来引用你的模块，这样可以减少相对路径的使用，提高代码的可读性和维护性。

四、使用

配置完成后，就可以直接在component.d.ts中进行引用组件了

export {}

declare module 'vue' {
  // GlobalComponents只是一个组名，用来分组使用的，不用管
  export interface GlobalComponents {
    ClassPage: typeof import('./src/components/classPage/index.vue')['default'];
    ClassPageClassManager: typeof import('./src/components/classPage/classManager.vue')['default'];
    // Add more global components if needed
  }
}