插件地址：https://github.com/antfu/unplugin-auto-import

vue3+vite搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置

//vite.config.js
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"
let path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports:['vue','vue-router']//自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
  })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')//配置路径别名
    }
  },
  server: {//解决跨域问题
    port: 8090, // 端口
    proxy: {
      '/api': {
        target: 'http://192.168.25.133:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

vue3+vite+ts搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      dts:"src/auto-import.d.ts" // 生成在src路径下名为auto-import.d.ts的声明文件
    }),
  ],
  resolve: {
    alias: { "@": path.resolve("./src") },
  },
  envPrefix: ["VITE_", "MXL_"], //暴露环境变量配置别名
  server: {//解决跨域问题
    port: 8090, // 端口
    proxy: {
      '/api': {
        target: 'http://192.168.25.133:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
});

vue3+vue-cli搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置，

//vue.config.js
const {
    defineConfig
} = require('@vue/cli-service')
const {
    resolve
} = require('path')
module.exports = defineConfig({
    configureWebpack: {
        plugins: [
            require('unplugin-auto-import/webpack')({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', 'vue-router'],
                eslintrc: {
                    enabled: true, // <-- this
                },
            }),
        ],
    },
    transpileDependencies: true,
    chainWebpack: config => {
        // 别名设置
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@api', resolve('src/api'))
            .set('@components', resolve('src/components'))
            .set('@utils', resolve('src/utils'))
            .set('@views', resolve('src/views'))
})

如果安装了eslint，使用的ref、torefs等报错undefind如下图

需在2个地方vue.config.js ，.eslintrc.js文件做配置

代码：

//vue.config.js
configureWebpack: {
        plugins: [
            require('unplugin-auto-import/webpack')({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', 'vue-router'],
                eslintrc: {
                    enabled: true, // <-- this
                },
            }),
        ],
    },

//.eslintrc.js
 extends: [
        'plugin:vue/essential',
        'airbnb-base',
        'prettier',
        'plugin:prettier/recommended', // 添加 prettier 插件,
        './.eslintrc-auto-import.json'
    ],