使用unplugin-vue-components

使用unplugin-vue-components

开发应用程序时，我们通常会使用许多第三方组件库。然而，这些组件库通常包含大量的代码，而我们只需要其中的一小部分。这就导致了应用程序的体积变得非常大，加载时间变长。为了解决这个问题，我们可以使用unplugin-vue-components插件来实现按需引入

vite 使用 unplugin-vue-components 插件可以实现在开发过程中自动按需引入组件，减少打包体积

安装依赖

npm i unplugin-vue-components -D

• 💚 开箱即用的 Vue 2 和 Vue 3。
• ✨ 同时支持组件和指令。
• ⚡️ 支持 Vite、Webpack、Vue CLI、Rollup、esbuild 等，由 unplugin 提供支持。
• 🏝 可树可切换，仅注册您使用的组件。
• 🪐 文件夹名称作为命名空间。
• 🦾 完整的 TypeScript 支持。
• 🌈 适用于常用 UI 库的内置解析器。
• 😃 与不插入图标完美配合。

配置插件

在 vite.config.js 中配置插件

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      dts: true, //ts支持
      dirs: ['src/views', 'src/components'], // 自定义路径按需导入
      resolvers: [AntDesignVueResolver()] // antd直接使用组件,无需在任何地方导入组件
    })
  ],
})

命名冲突

[unplugin-vue-components] 的 naming conflicts

Components({
      resolvers: [AntDesignVueResolver()],
      // 加上下面这一行作为配置项即可
      directoryAsNamespace: true,
    }),

tsconfig.json配置

项目根目录自动生成一个components.d.ts文件;

// tsconifg.json
{
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "./auto-imports.d.ts",
        "./components.d.ts"
      ]
}