1、unplugin-auto-import插件的解决的问题
unplugin-auto-import 这个插件是为了解决在开发中的导入问题,比如经常不清楚相对路径的问题,这个插件就是解决这个问题
这个插件会在根目录生成一个auto-import.d.ts,这个文件会将所有的插件导入到global中,这样在使用的时候直接就可以使用了
2、插件安装
在终端执行命令
npm i -D unplugin-auto-import![](http://zhangshiyu.com/zb_users/upload/2024/04/20240406112038171237363823931.png)
配置文件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 在设置的目录下
// 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文件,可以重新运行一下项目,或者关闭编辑器重新打开运行即可。
3、测试
在使用的时候会有一个hook,检测到使用的对象是global,则直接导入
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、总结
作为一个刚刚入手的后端同学来说,这些插件还是不太熟悉
查了下d.ts的概念
d.ts大部分编辑器能识别d.ts文件,当你写js、ts代码的时候给你智能提示
.d.ts可以理解成API版本的代码, 只包含基本的类, 函数, 变量类型, 参数类型, 返回值等,用于给编译器以及IDE识别是否符合API定义类型,发布之后就可以看不到了。