欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析

 更新時(shí)間：2023年02月16日 11:20:24   作者：Bigger  
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

unplugin-auto-import：為 Vite、Webpack、Rollup 和 esbuild 按需自動(dòng)導(dǎo)入 API。支持 TypeScript。

unplugin-vue-components：Vue 的按需組件自動(dòng)導(dǎo)入。

這兩個(gè)插件都是涉及到按需自動(dòng)導(dǎo)入，所以我們?cè)谑褂?Vue 和其對(duì)應(yīng)的 組件之類(lèi)時(shí)，都可能會(huì)需要這兩個(gè)插件的幫助，幫助我們實(shí)現(xiàn)按需自動(dòng)導(dǎo)入，避免全量引入的尷尬以及每個(gè)文件都要手動(dòng)導(dǎo)入 API 的低效重復(fù)搬磚。

但是，在項(xiàng)目中使用 unplugin-auto-import 和 unplugin-vue-components 總會(huì)遇到的一些問(wèn)題，在此特意匯總?cè)缦拢约疤峁┳詈蟮慕鉀Q辦法，希望幫助到有需要的人。

安裝

首先就是安裝，為啥推薦使用 pnpm ，在此就不贅述了（可自行去了解）。

pnpm add -D unplugin-auto-import
pnpm add -D unplugin-vue-components

vite 版本

修改 vite.config.ts 文件內(nèi)容，在此以 ElementPlusResolver 為例，其他組件類(lèi)同。

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()],
}),

問(wèn)題1：自動(dòng)導(dǎo)入的依然 eslint 報(bào)錯(cuò)

現(xiàn)象：使用過(guò)程中會(huì)自動(dòng)引入 Vue 相關(guān)組合 Api，是起作用的，但是 eslint 卻報(bào)錯(cuò)，讓人很不舒服。

分析：起作用表示導(dǎo)入是正常可以用的，那么就是 eslint 的問(wèn)題。但是怎么解決呢？是不是半天苦苦無(wú)果？

解決辦法：

在剛才的 vite.config.ts 文件中修改：

AutoImport({
  imports: ["vue", "vue-router"],
  resolvers: [ElementPlusResolver()],
  // 新增如下
  dts: "src/auto-import.d.ts",
  eslintrc: {
    enabled: true
  },
}),

eslintrc 中 enabled 設(shè)置為 true，保存之后會(huì)隨即在跟目錄下生成 .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
  }
}

然后將這個(gè)文件引入 .eslintrc.cjs

extends: [ 
    // ...
    './.eslintrc-auto-import.json' 
]

到此，該問(wèn)題就完美解決了。

問(wèn)題2: 自動(dòng)生成的 components.d.ts 文件內(nèi)容有報(bào)錯(cuò)

解決辦法：

修改 .d.ts 文件生成目錄

Components({
  resolvers: [ElementPlusResolver()],
  // 新增如下
  dts: 'src/components.d.ts'
}),

到此該問(wèn)題也就 完美解決了。

最后

希望大家如果遇到上述問(wèn)題，可以在掘金里邊搜到這里的解決辦法，幫助到大家。

同時(shí)如果大家項(xiàng)目中遇到其他什么問(wèn)題，也可以在一起討論找解決辦法，更多關(guān)于unplugin-auto-import unplugin-vue-components的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論