vue開發(fā)利器之unplugin-auto-import的使用
1、unplugin-auto-import插件的解決的問題
unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,比如經(jīng)常不清楚相對路徑的問題,這個插件就是解決這個問題
這個插件會在根目錄生成一個auto-import.d.ts,這個文件會將所有的插件導(dǎo)入到global中,這樣在使用的時候直接就可以使用了
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' // 路徑下自動生成文件夾存放全局指令 }), ], })
這樣生成的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'] }
可以看到基本上所有的可能使用的都生成出來了
注意:上面配置完畢dts后可能并不會自動生成auto-import.d.ts文件,可以重新運行一下項目,或者關(guān)閉編輯器重新打開運行即可。
3、測試
在使用的時候會有一個hook,檢測到使用的對象是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é)
作為一個剛剛?cè)胧值暮蠖送瑢W(xué)來說,這些插件還是不太熟悉
查了下d.ts的概念
d.ts大部分編輯器能識別d.ts文件,當(dāng)你寫js、ts代碼的時候給你智能提示
.d.ts可以理解成API版本的代碼, 只包含基本的類, 函數(shù), 變量類型, 參數(shù)類型, 返回值等,用于給編譯器以及IDE識別是否符合API定義類型,發(fā)布之后就可以看不到了。
補充:unplugin-auto-import 配置ESlint報錯問題
自動導(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啟用。生成一次就可以,避免每次工程啟動都生成 filepath: './.eslintrc-auto-import.json', // 生成json文件 globalsPropValue: true, }, }) ] });
.eslintrc.js引入該文件
更新:生成的文件前有一個“·”,引入時忘記了。浪費時間排查
extends: [ 'plugin:vue/vue3-essential', 'plugin:vue/vue3-recommended', 'plugin:vue/vue3-strongly-recommended', './.eslintrc-auto-import.json' ],
到此這篇關(guān)于vue開發(fā)利器之unplugin-auto-import使用的文章就介紹到這了,更多相關(guān)vue unplugin-auto-import使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-01-01基于vue+echarts數(shù)據(jù)可視化大屏展示的實現(xiàn)
這篇文章主要介紹了基于vue+echarts數(shù)據(jù)可視化大屏展示的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12關(guān)于vue利用postcss-pxtorem進行移動端適配的問題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進行移動端適配的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11vue中axios的封裝問題(簡易版攔截,get,post)
這篇文章主要介紹了vue中axios的封裝問題(簡易版攔截,get,post),需要的朋友可以參考下2018-06-06vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實現(xiàn)
本文主要介紹了vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06