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