vue3的自动引入ref,computed,reactive等的插件 unplugin-auto-import

1、安装插件

npm install -D unplugin-auto-import 

2、在vite-config.ts中的配置

//先引入
import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
      vue(),
      //然后配置
      AutoImport({
       imports: ['vue'],
        dts: 'src/auto-import.d.ts'
     }),
  ]
})

3、引入之前我们在每个组件中都得写入如下：
import { reactive, computed, onMounted, ref, toRefs } from “vue”;

<template>
	<div class="login_main">
		<div class="login_content">
			<h2>账号登录</h2>
			<a-form autocomplete="off">
				<a-form-item class="login_form">
					<a-input placeholder="请输入账号" maxLength="11" v-model:value="username" />
				</a-form-item>
				<a-form-item class="login_form login_password">
					<a-input-password maxLength="11" placeholder="请输入密码" v-model:value="password" />
				</a-form-item>
				<a-form-item class="login_form login_verify">
					<a-input placeholder="请输入验证码" maxLength="6" v-model:value="verify" />
					<img @click="changeVerify" :src="imgurl" alt="" />
				</a-form-item>
				<a-form-item class="login_form">
					<a-button type="primary" :size="size" @click="handleClick">登录</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script lang="ts">
//引入前我们都得写如下import 
import { reactive, computed, onMounted, ref, toRefs } from "vue";
import type { SizeType } from "ant-design-vue/es/config-provider";
// 引入公共js文件
import utils from "@/utils/tools";
import { getCapture, loginApi } from "@/api/login";
interface FormState {
	username: string;
	password: string;
	verify: string;
}
export default {
	setup() {
		const formState: FormState = reactive({
			username: "",
			password: "",
			verify: "",
		});
		const size = ref<SizeType>("large");
		const verityCode = utils.getCookie("appletSystem:sess");
		console.log(verityCode);
		const formDataObj = reactive({
			imgurl: "",
		});
		const changeVerify = (): void => {
			getCapture().then((res) => {
				formDataObj.imgurl = res.data.imgurl;
			});
		};
		changeVerify();
		const handleClick = () => {
			loginApi().then((res) => {
				console.log(res);
			});
		};
		return {
			...toRefs(formState),
			size,
			changeVerify,
			...toRefs(formDataObj),
			handleClick,
		};
	}
}
</script>

4、引入unplugin-auto-import插件后

<template>
	<div class="login_main">
		<div class="login_content">
			<h2>账号登录</h2>
			<a-form autocomplete="off">
				<a-form-item class="login_form">
					<a-input placeholder="请输入账号" maxLength="11" v-model:value="username" />
				</a-form-item>
				<a-form-item class="login_form login_password">
					<a-input-password maxLength="11" placeholder="请输入密码" v-model:value="password" />
				</a-form-item>
				<a-form-item class="login_form login_verify">
					<a-input placeholder="请输入验证码" maxLength="6" v-model:value="verify" />
					<img @click="changeVerify" :src="imgurl" alt="" />
				</a-form-item>
				<a-form-item class="login_form">
					<a-button type="primary" :size="size" @click="handleClick">登录</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script lang="ts">
import type { SizeType } from "ant-design-vue/es/config-provider";
// 引入公共js文件
import utils from "@/utils/tools";
import { getCapture, loginApi } from "@/api/login";
interface FormState {
	username: string;
	password: string;
	verify: string;
}
export default {
	setup() {
		const formState: FormState = reactive({
			username: "",
			password: "",
			verify: "",
		});
		const size = ref<SizeType>("large");
		const verityCode = utils.getCookie("appletSystem:sess");
		console.log(verityCode);
		const formDataObj = reactive({
			imgurl: "",
		});
		const changeVerify = (): void => {
			getCapture().then((res) => {
				formDataObj.imgurl = res.data.imgurl;
			});
		};
		changeVerify();
		const handleClick = () => {
			loginApi().then((res) => {
				console.log(res);
			});
		};
		return {
			...toRefs(formState),
			size,
			changeVerify,
			...toRefs(formDataObj),
			handleClick,
		};
	}
}
</script>

这样是不是方便许多了。