（四） Cursor 项目进阶：销售数据分析（前端 Vue.js 框架部分）

🖥️  Cursor 项目进阶：销售数据分析（前端 Vue.js 框架部分）

6.1 前置工作

在开始编写代码之前，需要完成以下准备工作：

1. 本地开发环境配置：确保已安装 Vue.js 框架所需的工具和软件。
2. 项目需求理解：明确项目的基本需求和技术架构。

前端项目关键部分

• 数据可视化展示：展示销售趋势和分类统计数据。
• 数据上传功能：支持 CSV 文件的上传和处理。
• 数据查询页面：支持用户按多个条件查询销售记录。
• 响应式布局：确保在各种设备上实现良好的显示效果。

技术框架：采用 Vue.js 3 作为主要的前端框架，结合 Cursor 的智能辅助功能加速开发。

6.1.1 创建前端项目

项目创建步骤

1. 在 Cursor 中，单击 "File" 下拉菜单，选择 "New Window" 新建一个窗口。
2. 在新窗口中，单击 "Open project" 按钮，新建一个项目。
3. 建议将前端项目的文件夹和后端项目的文件夹放在同一目录下，命名为 sales_analysis_web。
4. 打开新建的文件夹，完成前端项目的创建。

6.1.2 为项目添加文档

获取 API 文档

1. 启动后端项目，确保 run.py 文件正常运行。
2. 在浏览器中访问 http://localhost:8000/docs，查看 Swagger UI 页面（后端项目的在线 API 文档）。

让 Cursor 读懂文档的三种方式

1. 引用文件：在 "CHAT" 面板中输入 @，选择 "Files" 引用项目中的文件。
2. @Docs 选项：选择 "Docs" 添加新文档，填写文档地址并确认。
3. Cursor Settings：通过 "Features" 选项一次性添加文档。

文档管理

• 刷新文档：每天手动刷新文档，确保本地与在线文档同步。
• 文档索引：查看索引页面数量，判断文档是否更新。

特殊情况处理

• 本地文档地址无法添加：目前不支持本地文档地址的直接导入。
• 解决方案：复制后端项目 API 文档的 JSON 定义，创建文件用于后续引用。

6.2 实现前端代码

6.2.1 用 "CHAT" 面板确定开发步骤

1. 在 "CHAT" 面板中引用 api.md 和 Vue.js 文档作为上下文