1 unplugin-vue-components

npm install unplugin-vue-components -D
插件地址:https://github.com/antfu/unplugin-vue-components#readme
// vite.config.js
import { defineConfig } from 'vite'
//自动导入组件
import Components from 'unplugin-vue-components/vite'；
//自动按需引入ui库
import {
  ElementPlusResolver,
  AntDesignVueResolver,
  VantResolver,
  HeadlessUiResolver,
  ElementUiResolver
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    Components({
      // 指定组件位置，默认是src/components
      //目录结构
			//|-- components
	           // |-- Heloow
		         //  |-- index.vue
      dirs: ['src/components'],
      // ui库解析器
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
        HeadlessUiResolver(),
        ElementUiResolver()
      ]
      extensions: ['vue'],
      // 配置文件生成位置
      dts: 'src/components.d.ts'
    })
  ]
})

2 unplugin-auto-import/vite

npm install unplugin-auto-import -D
插件地址:https://github.com/antfu/unplugin-auto-import
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

vue-global-api 解决eslint报错以及页面警告
插件地址:https://github.com/antfu/vue-global-api

npm install  vue-global-api 
在main.ts
引入 import 'vue-global-api'