vue3 開發(fā)利器2——unplugin-vue-components
基本上無害
發(fā)布于 云南 2023-04-30 · 3.5w瀏覽 2贊

距離上一篇拖了半年,終于把下接上了。


這玩意兒是干啥的??

Vue的按需組件自動(dòng)導(dǎo)入。

特點(diǎn):

?? 支持 Vue 2 和 Vue 3 的開箱即用。

? 同時(shí)支持 組件 和 自定義指令。

?? 支持 Vite、Webpack、Vue CLI、Rollup、esbuild 等,由?unplugin?驅(qū)動(dòng)。

?? 樹狀結(jié)構(gòu),只注冊你使用的組件。

?? 文件夾名稱作為命名空間。

?? 完全支持 TypeScript。

?? 內(nèi)置常用UI庫的解析器。

?? 與?unplugin-icons?完美合作。


安裝


設(shè)置?

寫在上圖?options?位置的配置項(xiàng),具體可以有如下參數(shù):


dts?—— TypeScript 支持?

為了獲得 TypeScript 對自動(dòng)導(dǎo)入組件的支持,Vue 3 有一個(gè)?PR,擴(kuò)展了全局組件的接口。目前,Volar?已經(jīng)支持這種用法了。如果你正在使用Volar,你可以按以下方式修改配置來獲得支持。


types?—— 全局類型注冊?

一些庫可能會(huì)注冊一些全局組件,供你在任何地方使用(例如 Vue Router 提供了??和?)。由于它們是全局可用的,這個(gè)插件不需要導(dǎo)入它們。

然而,那些通常對 TypeScript 不友好,你可能需要手動(dòng)注冊它們的類型。

因此 unplugin-vue-components 提供了一種只為全局組件注冊類型的方法。

所以?RouterLink?和?RouterView?將在?components.d.ts?中呈現(xiàn)。

默認(rèn)情況下,unplugin-vue-components 會(huì)在工作空間中安裝支持的庫(例如?vue-router)時(shí)自動(dòng)檢測。如果你想完全禁用它,你可以傳遞一個(gè)空數(shù)組給它:


總結(jié)?

以后都給我用這玩意兒寫項(xiàng)目,不準(zhǔn)每個(gè)頁面瘋狂地?import?了。

基本上無害
火星宛如雪花,從42號有軌電車車頂?shù)墓渭娖魃巷w落而下。
瀏覽 3.5w
2
相關(guān)推薦
最新評論
贊過的人 2
評論加載中...

暫無評論,快來評論吧!