這玩意兒是干啥的？
還記得 Vue 3 的組合式 API 語(yǔ)法嗎？如果有印象，那你肯定對(duì)以下代碼有著刻入 DNA 般的熟悉：
剛開始寫覺(jué)得沒(méi)什么，但是后來(lái)漸漸發(fā)現(xiàn)，這玩意兒幾乎每個(gè)頁(yè)面都有??！
每次都要寫，哪怕是復(fù)制粘貼都會(huì)非常繁瑣。并且每一個(gè) <script setup> 下面都頂著一大坨 import，看著也十分難受。
本文介紹的 unplugin-auto-import 就是為了解決這個(gè)問(wèn)題而誕生的。
unplugin-auto-import 官方簡(jiǎn)介：
為 Vite、Webpack、Rollup 和 esbuild 按需自動(dòng)導(dǎo)入 API。支持 TypeScript。由 unplugin 提供技術(shù)支持。
安裝
設(shè)置
寫在上圖 options 位置的配置項(xiàng)，具體可以有如下參數(shù)：
include
規(guī)定可自動(dòng)引入的文件后綴。
使用正則表達(dá)可引入后綴，多條正則用數(shù)組包裹。
imports
全局引入 npm 包。
分為 預(yù)設(shè) 和 自定義。
dirs
自動(dòng)引入自定義的 js 包。
默認(rèn)情況下，它只掃描目錄下的一層模塊（即無(wú)法自動(dòng)引入更深層級(jí)的包）。
dts
生成相應(yīng)的.d.ts文件的文件路徑。
當(dāng) "typescript "被安裝在本地時(shí)，默認(rèn)為 "./auto-imports.d.ts"。
設(shè)置false來(lái)禁用。
vueTemplate
在 Vue 的 Template 中也自動(dòng)引入
resolvers
自定義解析器，與 unplugin-vue-components 兼容。（下一篇文章再做介紹）
eslintrc
自動(dòng)引入會(huì)引起 eslint 檢查報(bào)錯(cuò)，添加這個(gè)選項(xiàng)來(lái)避免。
它會(huì)生成相應(yīng)的.eslintrc-auto-import.json文件。
總結(jié)
以后都用這玩意兒寫項(xiàng)目，不準(zhǔn)每個(gè)頁(yè)面瘋狂地 import 了。
暫無(wú)評(píng)論，快來(lái)評(píng)論吧!