unplugin-vue-components 是由 Vue官方人員開發的一款自動引入插件，可以省去比如 UI 庫的大量 import 語句。
安裝
npm i unplugin-vue-components -D
配置
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 官方對它針對適配了，如果現階段需要用到測試代碼的童鞋則不太適合。