使用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"
      ]
}