浅析按需引入自定义组件unplugin-vue-components、按需自动导入api unplugin-auto-import的使用和vite-plugin-style-import使用

一、unplugin-vue-components 插件

　　unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）作者是Vite生态圈大名鼎鼎的Anthony Fu。使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue' 这样的代码了，插件会自动识别 template 中使用的自定义组件并自动注册。

　　unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。

// 1、安装
npm i unplugin-vue-components -D

// 2、配置
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
      resolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })]
    })
  ]
}

• 这里以 ant-design-vue 为例，引入包里自带的 AntDesignVueResolver 函数（主流的 UI 都有内置，如果没有的话可以自己实现一个 resolver）。importStyle 指是否需要自动随引入加载对应的组件样式，我这里设置为 false，因为某些二级组件（比如 DateRangePicker）没办法准确地识别正确路径，他的搜寻路径都是按一级组件来写的，所以我改成了全量导入 css。resolveIcons 配置是否对 antd 的图标起作用。

• 配置完 js 引入，如果使用 ts 写项目的话，当然就要考虑类型的问题了，自动引入确实可以省略引入，但是这样也失去了类型提示。antv 提供了一个 global.d.ts 类型声明文件（实测 element-plus 也提供了这一类型文件)，只需要在 tsconfig 的 types 项下添加 ant-design-vue/typings/global 即可提供组件的类型声明。没有引入也有组件类型提示：

　　想必你已经看到了 dirs 这个配置项了，他不仅可以实现 UI 框架自动引入，还支持你自己项目中开发的公共组件自动引入。dirs 这个配置的默认值就是 src/components ，如果你想取其他的文件夹名也是可以的，在检测到你在使用 ts 之后，他会自动在项目根目录生成一个 compnents.d.ts 里面即是根据组件内容生成的类型声明，为 volar 提供类型提示，他会自动根据文件变动进行更新。（注意：compnents.d.ts 文件会在 vue-tsc 运行的时候进行更新，建议把他加入 gitignore 中，以免出现频繁更改导致 git 监测到项目内容一直变动的问题）

　　注意事项：这个包大大地简洁了业务代码，以后再也不用写一大堆的 import 了，但是所有的这一切都基于你写的是 Vue 单文件组件。如果是喜欢用 jsx 编写 Vue 代码的同学，那他就帮不了你了。还有就是因为他是编译时动态加入 import 语句，所以在单元测试的时候，测试框架可能会提示缺少引入，这个就要等 Vite 官方对它针对适配了，如果现阶段需要用到测试代码的童鞋则不太适合。

二、unplugin-auto-import的使用

　　unplugin-auto-import 为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API，支持 TypeScript。

1、unplugin-auto-import插件的解决的问题

　　unplugin-auto-import 这个插件是为了解决在开发中的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题。这个插件会在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了。

2、使用

// 1、安装
npm i -D unplugin-auto-import

// 2、配置文件vite.config.ts
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      dts: 'types/auto-imports.d.ts', // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，
// 注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false
//否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        filepath: './.eslintrc-auto-import.json', // 生成json文件,可以不配置该项，默认就是将生成在根目录
        globalsPropValue: true,
      },
    }),
  ]
})

// 3、添加.eslintrc-auto-import.json
{
  "globals": {}
}
// 4、配置.eslintrc
{
  ...
  "extends": [
    ...
    "./.eslintrc-auto-import.json"
  ]
}
// 5、配置tsconfig.json
{
  ...
  "include": ["./auto-imports.d.ts"]
}

　　以上即可解决：使用 unplugin-auto-import 自动导入，并解决 eslint、typescirpt 变量报错问题。

　　这样生成的 auto-import.d.ts 在设置的目录下

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  // ......
}

　　可以看到基本上所有的可能使用的都生成出来了

　　注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可

三、vite-plugin-style-import使用

　　当你使用unplugin-vue-components来引入ui库的时候，message, notification 等引入样式不生效。此时就需要安装vite-plugin-style-import即可

// vite.config.js
import { defineConfig } from 'vite'
import styleImport, {
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
  NutuiResolve,
  AntdResolve
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      resolves: [
        AndDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
        NutuiResolve(),
        AntdResolve()
      ],
      // 自定义规则
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    })
  ],
  // 引用使用less的库要配置一下
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

　　更详细的内容见这篇文章：《尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等)》https://juejin.cn/post/7012446423367024676