vue3自动按需导入 unplugin-auto-import

第一步:

npm i unplugin-auto-import -D
或者 
yarn add unplugin-auto-import -D

第二步:

 修改vite.config.js的配置文件(Ts配置方法)

• 1): 将第二步中的代码 enable:false

  在src的同级新建一个目录 types

• 2): 运行项目 npm run dev

  在types文件夹中生成一个文件 auto-imports.d.ts

• 3): 将第二步中enable:true

  最后再重新运行项目

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入自动装配插件
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 配置自动装载配置
    AutoImport({
      // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件
      dts: 'types/auto-imports.d.ts',
      imports: ['vue', 'vue-router'],
      eslintrc: {
        // 默认false, true启用。生成一次就可以，
        // 避免每次工程启动都生成，
        // 一旦生成配置文件之后，最好把enable关掉，即改成false。
        // 否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        enabled: true,
        // 生成json文件,可以不配置该项，默认就是将生成在根目录
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true,
      },
    }),
  ]
})

4):

找到 tsconfig.json

 将这个代码粘贴到 include中
  
"types/auto-imports.d.ts"

在一下的代码中
"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
    
粘贴进入
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/auto-imports.d.ts"
  ],

第三步:重启代码即可

完整代码(vue3-js方法):

import { defineConfig } from 'vite'
    import vue 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','vuex'] })
      ],

    })