unplugin-auto-import與unplugin-vue-components安裝問題解析
背景
unplugin-auto-import：為 Vite、Webpack、Rollup 和 esbuild 按需自動導(dǎo)入 API。支持 TypeScript。
unplugin-vue-components：Vue 的按需組件自動導(dǎo)入。
這兩個插件都是涉及到按需自動導(dǎo)入，所以我們在使用 Vue 和其對應(yīng)的 組件之類時，都可能會需要這兩個插件的幫助，幫助我們實現(xiàn)按需自動導(dǎo)入，避免全量引入的尷尬以及每個文件都要手動導(dǎo)入 API 的低效重復(fù)搬磚。
但是，在項目中使用 unplugin-auto-import 和 unplugin-vue-components 總會遇到的一些問題，在此特意匯總?cè)缦?，以及提供最后的解決辦法，希望幫助到有需要的人。
安裝
首先就是安裝，為啥推薦使用 pnpm ，在此就不贅述了（可自行去了解）。
pnpm add -D unplugin-auto-import pnpm add -D unplugin-vue-components
vite 版本
修改 vite.config.ts 文件內(nèi)容，在此以 ElementPlusResolver 為例，其他組件類同。
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
問題1：自動導(dǎo)入的依然 eslint 報錯
現(xiàn)象：使用過程中會自動引入 Vue 相關(guān)組合 Api，是起作用的，但是 eslint 卻報錯，讓人很不舒服。
分析：起作用表示導(dǎo)入是正?？梢杂玫模敲淳褪?eslint 的問題。但是怎么解決呢？是不是半天苦苦無果？
解決辦法：
在剛才的 vite.config.ts 文件中修改：
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [ElementPlusResolver()],
// 新增如下
dts: "src/auto-import.d.ts",
eslintrc: {
enabled: true
},
}),
eslintrc 中 enabled 設(shè)置為 true，保存之后會隨即在跟目錄下生成 .eslintrc-auto-import.json 文件。
{
"globals": {
"EffectScope": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeRouteLeave": true,
"onBeforeRouteUpdate": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"resolveDirective": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useLink": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true
}
}
然后將這個文件引入 .eslintrc.cjs
extends: [
// ...
'./.eslintrc-auto-import.json'
]
到此，該問題就完美解決了。
問題2: 自動生成的 components.d.ts 文件內(nèi)容有報錯
解決辦法：
修改 .d.ts 文件生成目錄
Components({
resolvers: [ElementPlusResolver()],
// 新增如下
dts: 'src/components.d.ts'
}),
到此該問題也就 完美解決了。
最后
希望大家如果遇到上述問題，可以在掘金里邊搜到這里的解決辦法，幫助到大家。
同時如果大家項目中遇到其他什么問題，也可以在一起討論找解決辦法，更多關(guān)于unplugin-auto-import unplugin-vue-components的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了Vue3中使用vuex4的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue?數(shù)組添加數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import)，主要包括vue3自動導(dǎo)入和API的自動引入問題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
Vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案
這篇文章主要介紹了vue項目總結(jié)之webpack常規(guī)打包優(yōu)化方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
在本篇文章里小編給大家整理了一篇關(guān)于Vue中使用計算屬性的知識點總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)參考下。2021-12-12
Vue3+Vite+ElementPlus管理系統(tǒng)常見問題
本文記錄了使用Vue3+Vite+ElementPlus從0開始搭建一個前端工程會面臨的常見問題，沒有技術(shù)深度，但全都是解決實際問題的干貨，可以當(dāng)作是問題手冊以備后用，感興趣的朋友參考下2023-12-12
vue3中遇到reactive響應(yīng)式失效的問題記錄
這篇文章主要介紹了vue3中遇到reactive響應(yīng)式失效的問題記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09
vue使用Highcharts實現(xiàn)不同高度的3D環(huán)形圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實現(xiàn)不同高度的3D環(huán)形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3項目中配置sass,vite報錯Undefined mixin問題
這篇文章主要介紹了vue3項目中配置sass,vite報錯Undefined mixin問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02