快捷導(dǎo)航

vue開(kāi)發(fā)利器之unplugin-auto-import的使用

更新時(shí)間：2023年02月18日 11:35:43 作者：香菜+

unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下

1、unplugin-auto-import插件的解決的問(wèn)題

unplugin-auto-import 這個(gè)插件是為了解決在開(kāi)發(fā)中的導(dǎo)入問(wèn)題，比如經(jīng)常不清楚相對(duì)路徑的問(wèn)題，這個(gè)插件就是解決這個(gè)問(wèn)題

這個(gè)插件會(huì)在根目錄生成一個(gè)auto-import.d.ts，這個(gè)文件會(huì)將所有的插件導(dǎo)入到global中，這樣在使用的時(shí)候直接就可以使用了

2、插件安裝

在終端執(zhí)行命令

npm i -D unplugin-auto-import

配置文件vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import AutoImport from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
        imports:["vue","vue-router"],
        dts:'src/auto-import.d.ts'    // 路徑下自動(dòng)生成文件夾存放全局指令
      }),
 
  ],
})

這樣生成的auto-import.d.ts 在設(shè)置的目錄下

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const resolveDirective: typeof import('vue')['resolveDirective']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useLink: typeof import('vue-router')['useLink']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}

可以看到基本上所有的可能使用的都生成出來(lái)了

注意：上面配置完畢dts后可能并不會(huì)自動(dòng)生成auto-import.d.ts文件，可以重新運(yùn)行一下項(xiàng)目，或者關(guān)閉編輯器重新打開(kāi)運(yùn)行即可。

3、測(cè)試

在使用的時(shí)候會(huì)有一個(gè)hook，檢測(cè)到使用的對(duì)象是global，則直接導(dǎo)入

import Home from "../components/Home.vue";
import Page1 from "../components/Page1.vue";
import {createRouter, createWebHistory} from "vue-router";
import testAuto from "../components/TestAuto.vue";
 
const router = createRouter({
    history: createWebHistory(),
    routes :[
        {path: "/home", component: Home},
        {path: "/page1", component: Page1},
        {path: "/page2", component: testAuto}
    ]
});
export  default router;

4、總結(jié)

作為一個(gè)剛剛?cè)胧值暮蠖送瑢W(xué)來(lái)說(shuō)，這些插件還是不太熟悉

查了下d.ts的概念

d.ts大部分編輯器能識(shí)別d.ts文件，當(dāng)你寫(xiě)js、ts代碼的時(shí)候給你智能提示

.d.ts可以理解成API版本的代碼，只包含基本的類(lèi), 函數(shù), 變量類(lèi)型, 參數(shù)類(lèi)型, 返回值等，用于給編譯器以及IDE識(shí)別是否符合API定義類(lèi)型，發(fā)布之后就可以看不到了。

補(bǔ)充：unplugin-auto-import 配置ESlint報(bào)錯(cuò)問(wèn)題

自動(dòng)導(dǎo)入的API導(dǎo)致ESlint警告

生成.eslintrc-auto-import.json文件

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
            imports: ['vue', 'vue-router', 'pinia'],
            eslintrc: {
                enabled: false, // 默認(rèn)false, true啟用。生成一次就可以，避免每次工程啟動(dòng)都生成
                filepath: './.eslintrc-auto-import.json', // 生成json文件
                globalsPropValue: true,
            },
        })
    ]
});

.eslintrc.js引入該文件

更新：生成的文件前有一個(gè)“·”，引入時(shí)忘記了。浪費(fèi)時(shí)間排查

  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-recommended',
    'plugin:vue/vue3-strongly-recommended',
    './.eslintrc-auto-import.json'
  ],

到此這篇關(guān)于vue開(kāi)發(fā)利器之unplugin-auto-import使用的文章就介紹到這了,更多相關(guān)vue unplugin-auto-import使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: