unplugin-auto-import的使用

1、unplugin-auto-import插件的解决的问题

unplugin-auto-import 这个插件是为了解决在开发中的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题

这个插件会在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了

2、插件安装

在终端执行命令

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 在设置的目录下

// 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定义类型，发布之后就可以看不到了。