在新建了一个项目后展示的是App.vue的内容此时该项目我想要做的是一个中后台管理系统。所以第一个页面应该为登录页面。此时便需要增加路由将页面转过去。同时我要求该系统是基于ant-design-vue的所以还需要引入这个组件库。首先运行npm install vue-router4vue3vue-router4 vue23然后在项目中新建目录loginlogin.vue用于写登陆页面内容新建目录routerindex.ts用于写具体的路由动态路由同时我还新建了一个layout的文件夹里面的index.vue暂时用于登录成功后的跳转主页暂未开发打算留到登录功能写完后在开发路由index.ts// src/router/index.ts // createRouter创建路由实例的函数createWebHistory使用HTML5 History模式URL不带 # import { createRouter, createWebHistory } from vue-router // type { RouteRecordRaw }TypeScript类型用于类型检查type关键字表示这是纯类型打包时会被移除 // RouteRecordRaw是Vue Router源码中定义的一个TypeScript类型/接口规定了每个路由配置必须包含哪些字段、可选哪些字段、每个字段是什么类型 import type { RouteRecordRaw } from vue-router // 加上 type 关键字 // 登陆时的vue组件 import LoginView from ../views/login/index.vue const routes: RouteRecordRaw[] [ { // 登录页用同步加载因为是必须的 path: /, name: login, component: LoginView }, { // 其他页面懒加载 path: /home, name: home, component: () import(../views/layout/index.vue) } ] // 创建路由实例 const router createRouter({ history: createWebHistory(), // 使用history模式 routes // 传入路由表 }) //导出路由 export default router导出路由后需要再main.js中引入import { createApp } from vue import ./style.css import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)至此路由引入结束运行项目后已经自动转去了登录页。注把之前的默认展示HelloWorld清干净。引入ant-design-vue一、安装依赖npm install ant-design-vuenpm install unplugin-vue-components -D二、配置Vite插件vite.config,tsimport { defineConfig } from vite import vue from vitejs/plugin-vue // 引入自动导入组件插件 import Components from unplugin-vue-components/vite // 引入 Ant Design Vue的解析器 import { AntDesignVueResolver } from unplugin-vue-components/resolvers // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ AntDesignVueResolver({ // 按需加载样式 importStyle: false, // 如果需要加载图标库可以开启 resolveIcons: true }) ] }) ], })这里有个坑刚开始我配置的是// 按需加载样式 importStyle: css但是我在页面写组件的时候报错Failed to resolve import ant-design-vue/es/form/style/css from src/views/login/index.vue. Does the file exist?因为unplugin-vue-components插件生成的导入语句正在尝试加载4.x版本中已经不存在的css文件所以此时应该把importStyle设为false完全禁用自动样式导入直接在main.js中全局导入样式三、引入全局样式main.jsimport { createApp } from vue import ./style.css import App from ./App.vue import router from ./router // 引入Ant Design Vue的基础样式 import ant-design-vue/dist/reset.css createApp(App).use(router).mount(#app)四、页面直接使用组件(login/index.ts)template div classlogin-container h2用户登录/h2 a-form namelogin-form refformRef :modelformState a-form-item label用户名 nameusername a-input v-modelformState.username/a-input /a-form-item a-form-item label密码 namepassword a-input v-modelformState.password/a-input /a-form-item a-form-item a-button typeprimary clickhandleLogin登录/a-button /a-form-item /a-form /div /template script setup langts import { reactive } from vue // import { useRouter } from vue-router interface userInfo { username: string, password: string } const formState: userInfo reactive({ username: , password: }) // const router useRouter() const handleLogin () { // 这里写登录逻辑比如调用接口 console.log(登录信息, formState.username,formState. password) // 登录成功后跳转到首页 // router.push(/home) } /script style scoped langscss .login-container { max-width: 400px; margin: 100px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; } /style实现效果