unplugin-vue-components

摘自官方文档

查询更多配置，移步官方文档

官方描述

• 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
• ✨ Supports both components and directives.
• ⚡️ Supports Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
• 🏝 Tree-shakable, only registers the components you use.
• 🪐 Folder names as namespaces.
• 🦾 Full TypeScript support.
• 🌈 Built-in resolvers for popular UI libraries.
• 😃 Works perfectly with unplugin-icons.

vue3.x-vite 项目中使用

项目测试版本

• ⚡️ vue@3.4.29
• ⚡️ ant-desigin-vue@4.2.3
• ⚡ pnpm@9.9.0
• ⚡ node@22.2.0
• ⚡ unplugin-vue-components@0.27.4

插件配置流程

0. 下载 unplugin-vue-components

   pnpm i unplugin-vue-components -D
   

2. 在 vite.config.ts 中加入配置

   
   // vite.config.ts
   import Components from 'unplugin-vue-components/vite'
   ​
   export default defineConfig({
     plugins: [
       Components({ /* options */ }),
     ],
   })
   

3. 指定 components.d.ts 文件的生成路径

   默认插件会将它生成到根目录中，这里为了配合 tsconfig.json 的配置，我们手动配置下

   
   // vite.config.ts
   import Components from 'unplugin-vue-components/vite'
   ​
   export default defineConfig({
     plugins: [
       Components({ 
   +     dts: 'src/typings/components.d.ts',
       }),
     ],
   })
   

   tsconfig.json

   {
     //...
     "include": [
       "env.d.ts",
       "src/**/*",
       "src/**/*.vue",
     ],
   }
   

4. 此时，插件自动按需导入项目中使用到的插件

   注：插件默认只查询 src/components 下的 .vue 文件，如需自定义，需要手动配置

vue2.x-webpack 项目中使用

项目测试版本

• ⚡️ vue@2.7.16
• ⚡️ ant-desigin-vue@1.7.8(目前vue2最高支持版)
• ⚡ npm@10.8.3
• ⚡ node@22.2.0
• ⚡ unplugin-vue-components@0.27.4

插件配置流程

1. 下载 unplugin-vue-components

   npm i unplugin-vue-components -D
   

2. 在 webpack.config.js 中配置

   const { defineConfig } = require("@vue/cli-service");
   const { default: Components } = require("unplugin-vue-components/webpack");
   const { AntDesignVueResolver } = require("unplugin-vue-components/resolvers");
   module.exports = defineConfig({
     transpileDependencies: true,
     chainWebpack: (config) => {
       config.plugin("unplugin-vue-components").use(
         Components({
           dts: "src/typings/components.d.ts",
           resolvers: [AntDesignVueResolver()],
         })
       );
     },
   });
   

使用过程中遇到的问题

1. 配置 ant design vue @4.x 时报错

   Module not found: Error: Can't resolve 'ant-design-vue/es/button/style/css'
   

   尝试加入以下配置

   // vite.config.ts
   import Components from 'unplugin-vue-components/vite'
   + import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
   ​
   export default defineConfig({
     plugins: [
       Components({ 
         dts: 'src/typings/components.d.ts',
         resolvers: [AntDesignVueResolver({ 
   +        importStyle: false
          })]
       }),
     ],
   })