需选择【Vue 3 + Vite】模板，新建MyPage.vue并规范命名，在App.vue中导入Home和MyPage组件，用ref声明currentView实现手动路由切换，且Home.vue必须存在。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在Qoder环境中快速创建一个可直接运行的Vue单页面组件，而不是从零配置整个项目。Qoder作为在线前端开发环境，支持Vue 3 + Vite开箱即用，但必须严格遵循其文件结构和入口约定，否则无法预览。
确认Qoder项目模板类型
打开Qoder后，新建项目时下拉选择模板 → 找到 【Vue 3 + Vite】 模板并点击创建。其他如“Vue 2”或“Vanilla JS”模板会导致后续步骤失效。
创建成功后，左侧文件树应自动包含：vite.config.js、package.json、src/main.js、src/App.vue —— 缺少任一文件说明模板选择错误，需重新创建。
在src目录下新增单页面组件文件
右键点击 src/components → 选择“新建文件” → 输入文件名，例如 MyPage.vue。
立即学习“前端免费学习笔记（深入）”；
注意：文件名必须以大写字母开头且含 .vue 后缀，【MyPage.vue 不等于 mypage.vue 或 MyPage.vue.txt】，否则Qoder无法识别为Vue组件。
双击打开 MyPage.vue，粘贴以下最小可用结构：
我的单页面
<script setup><br/></script>
将新组件注册进路由系统
Qoder默认不启用 Vue Router，因此要实现“单页面”效果，必须手动模拟路由切换逻辑。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
第一步：打开 src/App.vue，删除原有 template 内全部内容，替换为：
第二步：在 <script setup> 区域顶部添加两行导入语句：</script>
import Home from './components/Home.vue'
import MyPage from './components/MyPage.vue'
第三步：在 <script setup> 中声明响应式状态：</script>
import { ref } from 'vue'
const currentView = ref('home')
确保Home组件存在且路径正确
Qoder模板自带 src/components/Home.vue，若该文件被误删，需立即重建：右键 src/components → 新建文件 → 命名为 Home.vue → 粘贴基础模板（同 MyPage.vue 结构，仅修改 h1 文字为“首页”）。
这一步不可跳过。如果 Home.vue 不存在，App.vue 中 import Home from './components/Home.vue' 将报错，整个页面白屏且无任何提示。
