在Cursor中完成Vue实战项目需全程操作：创建项目并自动切换工作区，配置tsconfig.json重启TS服务确保类型支持，用AI生成HomeView组件及路由，补全API调用与渲染逻辑，最后通过命令启动开发服务器。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor完成一个Vue实战项目，需从创建项目、配置环境、编写组件到启动调试全程在Cursor中操作，不切换到终端或外部编辑器。
初始化Vue项目
打开Cursor → 新建文件夹 → 在侧边栏右键该文件夹 → 选择“Open in Cursor” → 按 Ctrl+Shift+P（Windows）或 Cmd+Shift+P（Mac）调出命令面板 → 输入“Shell Command: Create New Terminal”并执行 → 终端自动打开后输入：【npm create vue@latest → 回车后按提示选择 TypeScript、Pinia、Vitest、ESLint 等选项 → 项目名输入 my-vue-app → 确认生成 → 等待依赖安装完成。
注意：不要手动执行 cd my-vue-app，Cursor会自动将工作区切换到新项目根目录；若终端未自动聚焦，点击终端标签页再回车确认。
配置Cursor智能补全与类型支持
在项目根目录下打开 tsconfig.json → 确保 "compilerOptions": { "moduleResolution": "bundler", "types": ["vite/client", "vue"] } 已存在 → 若缺失，手动添加 "vue" 到 types 数组末尾 → 保存文件 → 点击右下角 TypeScript 状态栏 → 选择 “Restart TS Server”。
立即学习“前端免费学习笔记（深入）”；
这一步必须做，否则 .vue 文件中的 defineComponent、ref 类型无法识别，光标悬停无提示，后续写代码会频繁报错。
创建首页组件并注册路由
方法一：快速生成页面组件
在 src/views 目录右键 → “New File” → 命名为 HomeView.vue → 输入以下内容后保存：
<script setup lang="ts">
const msg = 'Hello from HomeView'
</script>
<template><div>{{ msg }}</div></template>
方法二：用Cursor AI自动补全路由配置
打开 src/router/index.ts → 将光标放在 routes: 后 → 按 Cmd+K（Mac）或 Ctrl+K（Windows）唤出AI指令 → 输入“添加HomeView路由，路径为/，组件为@/views/HomeView.vue” → 回车等待生成 → 替换原有 routes 数组中的默认项 → 保存文件。
【务必检查 import 语句是否自动添加】：AI可能漏掉 import HomeView from '@/views/HomeView.vue'，若无此行，手动补上，否则页面白屏且控制台报错“undefined component”。
添加API调用逻辑并渲染数据
第一步：新建 API 文件
在 src/api（如不存在则新建）下创建 user.ts → 输入：
export const fetchUsers = () => fetch('/api/users').then(r => r.json())
第二步：在 HomeView.vue 中使用
光标定位到 <script setup> 区域 → 输入 “const users = ref([])” → 按 Tab 触发 AI 补全 → 选择 “Add async data fetch with onMounted” → 确认后自动插入 useFetch + onMounted 逻辑 → 修改 fetch 调用为 fetchUsers() → 保存。
第三步：更新模板
将 <template> 内容替换为：<ul><li v-for="u in users" :key="u.id">{{ u.name }}</li></ul>
第四步：启动开发服务器
按 Ctrl+Shift+P → 输入 “Vite: Start Dev Server” → 回车 → 等待 “Local: http://localhost:5173/” 出现在终端 → 点击链接在浏览器中打开。
