vue3 unplugin-auto-import,unplugin-vue-components自动导入

1.下载包

pnpm i unplugin-auto-import -D
pnpm i unplugin-vue-components -D

2.配置vite.config.ts

//vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite";

plugins: [
			vue(),
			//自动导入vue自带的ref、onMounted等等
			AutoImport({
				imports: [
							'vue',
							'vue-router',
							// 'vue-i18n',
							// '@vueuse/core',
							// 'pinia',
					],
					// eslint报错解决 没有直接设置false了
					eslintrc: {
						enabled: false, // Default `false`
						filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
						globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
				},
					dts: './auto-imports.d.ts', // 使用typescript，需要指定生成对应的d.ts文件或者设置为true,生成默认导入d.ts文件
					dirs: ['src/router', 'src/composables', 'src/util'],
			}),
			//导入自定义组件
			Components({

			})
	],

3.配置ts.config.app.jsoin下边include

//ts.config.app.json 

include数组加入"./auto-imports.d.ts"解决ref找不到问题

  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","./auto-imports.d.ts" ]