问题1：如何不去频繁的引入例如：reactive，ref，defineEmits，defineProps这样的方法

解决方案：引入插件 unplugin-auto-import

//并且在在vite.config.js中配置plugins: [vue({ reactivityTransform: true }),AutoImport({imports:['vue','vue-router']})]

问题2：无法使用input框中的change事件去监听当前实时输入内容

解决方案：在input标签使用这个属性能够监听 v-on:input=“changeValue”

问题2.1 父子以及两兄弟组件如何互相通信（提供两种解决方法）

思路：由父组件作为中介向两兄弟组件传播数据

父组件

注意：这里的v-model:valueParent="valueParent"会报错，不用管，因为如果你是刚开始使用vue3，vscode中的Vetur没有兼容这个写法，小问题，百度一下改下配置就好了，若果你真的觉得无法忍受那就自己去改了。

子组件A

子组件B

OS：其实这里我可以开启Minix混入的，不熟练，还是再来一遍。

第二种解决方法 使用mitt插件

先新建一个中转文件 xxxxx.js（随便取名）

import mitt from 'mitt'
const emitter=mitt()
export default emitter

A组件

import emitter from "./xxxx.js";
let strA = ref("这是A组件的数据");
const btn = () => {emitter.emit("fn", strA);
};

B组件

import emitter from "./xxxx.js";
let strB = ref("");
onBeforeMount(() => {emitter.on("fn", (e) => {console.log(e.value);strB.value = e.value;});
});

问题3：在vite中配置路由（有些时候并没有默认配置）

1. 在src/routre/router.js文件中（默认这个路径，按照约定来，约定好的规范是最重要的。）

import { createRouter, createWebHistory } from "vue-router"
import Home from "../views/home/index.vue"
console.log(Home)
const routes = [{path: "/home",name: "Home",component:Home},{path: "/about",name: "About",component:()=>import('../views/about/index.vue')}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router

2. main.js文件中

import { createApp } from 'vue'
import './style.css'
import router from './router/index'
import App from './App.vue'const app = createApp(App)
app.use(router)
app.mount("#app")

3. app.vue文件中（一定不要忘记了这个标签）

//！！！！！！！不然你会看不到界面（同时也要在url导航栏输入对应地址！！！！！）

4. OS：路由守卫这个功能根据自己的需求去进行添加