Use of unplugin-auto-import

1. Problems solved by unplugin-auto-import plug-in

unplugin-auto-import This plug-in is to solve import problems during development, such as the problem of often unclear relative paths. This plug-in solves this problem.

This plug-in will generate an auto-import.d.ts in the root directory. This file will import all plug-ins into global, so that they can be used directly when using them.

2. Plug-in installation

Execute command in terminal

npm i -D unplugin-auto-import

Configuration file 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'    // 路径下自动生成文件夹存放全局指令
      }),

  ],
})

The auto-import.d.ts generated in this way is in the set directory

// 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']
}

You can see that basically all possible uses have been generated.

Note: After configuring the dts above, the auto-import.d.ts file may not be automatically generated. You can re-run the project, or close the editor and reopen it.

3. Test

There will be a hook when using it. If it is detected that the object used is global, it will be imported directly.

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. Summary

As a back-end student who has just started, I am still not familiar with these plug-ins.

Checked the concept of d.ts

d.ts Most editors can recognize d.ts files and give you smart prompts when you write js and ts code.

.d.ts can be understood as API version code, which only contains basic classes, functions, variable types, parameter types, return values, etc. It is used to identify whether the compiler and IDE comply with the API definition type. It cannot be viewed after it is released. arrive.