Cursor使用指南：完全使用cursor搭建一套个人健康数据记录app系统（全程纯AI，0代码）

开场白：你与App开发，只差一个AI的距离

你是否也曾想过，开发一个属于自己的App？或许是一个追踪健身进度的记录工具，或许是一个捕捉日常灵感的私人平台。但“编程”这座看似高不可攀的大山，复杂的语法、繁琐的配置，似乎总在劝退每一个满怀热情的门外汉。

现在，时代变了。

AI编程助理的崛起，正在彻底颠覆传统的开发模式。今天，我们将要认识的主角——Cursor，就是一个能“听懂”人话并直接编写代码的革命性编辑器。它将成为你最强大的技术合伙人。

在本篇教程中，你不需要学习复杂的编程语言，也不需要记忆繁多的代码指令。我们将彻底告别手动敲代码。你的角色，是“产品经理”与“项目指挥官”，通过下达清晰的指令，让AI为你从零开始，一步步构建一个功能齐全、界面精美的健康数据记录App。

最终，我们将完成下面这个作品：

准备好了吗？让我们一起开启这段零代码的创造之旅。

准备工作：为AI“施工队”搭建好脚手架

在正式“施工”前，我们需要为我们的AI工程师准备好工作场地和工具，这个过程同样简单直观。

2.1 什么是Cursor？

简单来说，Cursor不是一个普通的文本编辑器。你可以把它想象成一个内置了顶尖AI大脑的代码工作室。你只需要用自然语言（比如中文）告诉它你想要什么，它就能理解你的意图，并直接生成、修改甚至优化代码。它是我们实现“0代码”开发的核心工具。

2.2 环境搭建：万丈高楼平地起

• 第一步：安装Cursor

  • 访问 Cursor官网 下载并安装对应你操作系统的版本。安装过程与普通软件无异。我们选择它，因为它将AI能力与代码编辑无缝集成，体验远超传统的“编辑器+插件”模式。

• 第二步：安装Node.js

  • 访问 Node.js官网 下载LTS（长期支持）版本并安装。
  • 为什么需要它？ Node.js是前端项目的“通用运行环境”。就像汽车需要汽油才能发动，我们后续创建的uni-app项目依赖Node.js环境才能运行和编译。你不需要深入了解它，只需确保它已安装。

• 第三步：安装HBuilderX

  • 访问 DCloud官网 下载App开发版并安装。
  • 为什么需要它？ HBuilderX是uni-app框架的官方“项目管理器”。它为uni-app提供了便捷的项目创建、真机运行、云打包等一系列可视化工具，对新手极其友好。

2.3 创建你的第一个项目

1. 打开HBuilderX。
2. 点击顶部菜单栏的“文件” -> “新建” -> “项目”。
3. 在弹出的窗口中，选择uni-app类型，输入你的项目名称（例如：health-tracker），选择一个存储路径。
4. 在模板选择中，保持默认的“默认模板”即可，确保勾选了Vue3版本。
5. 点击“创建”，HBuilderX会自动生成一个标准的uni-app项目。
6. 关键一步：在HBuilderX中右键点击项目根目录，选择“在外部终端中打开”，然后用Cursor打开这个项目文件夹。后续我们所有的“对话”都将在Cursor中进行。

此时，你会看到一堆文件和文件夹。别慌，我们只需要初步了解几个核心部分：

• pages：存放我们App的所有页面。
• static：存放图片、字体等静态资源。
• pages.json：一个非常重要的配置文件，用于管理App的页面路径和导航栏样式。

AI驱动开发：与Cursor的第一次“对话”

一切就绪，现在开始指挥我们的AI工程师。

3.1 项目架构的AI构思

在动手之前，先让AI帮我们规划一下蓝图。在Cursor中，你可以打开一个README.md文件，或者任何一个临时文件，输入以下指令。这不是代码，而是我们和AI沟通的草稿。

向AI提问：“我准备开发一个健康记录App，请使用Mermaid语法为我绘制出它的基本页面和组件结构图。”

AI会很快理解并生成一个结构图：

graph TD
    A[App] --> B{页面};
    B --> C[数据记录页(health-record)];
    B --> D[图表分析页(analysis)];
    B --> E[个人档案页(profile)];

    C --> C1(今日健康概览组件);
    C --> C2(快速记录入口组件);
    C --> C3(步数趋势图组件);

    A --> F(底部导航栏 TabBar);

这个图清晰地告诉我们，App包含三个主要页面，而我们的首页“数据记录页”又由三个核心功能组件构成。

3.2 创建首页：从一个空白文件开始

1. 在Cursor的左侧文件树中，右键pages文件夹，新建一个文件夹，命名为health-record。
2. 在health-record文件夹上右键，新建一个文件，命名为health-record.vue。
3. 现在，这个文件是空的。选中整个文件，按下Ctrl+K（或者Cmd+K），调出AI对话框，输入我们的第一个指令。

指令 (Prompt):

请帮我创建一个符合uni-app规范的Vue3页面基础结构，包含template、script和style三部分，并添加必要的lang="ts"和scoped属性。

AI会立刻填充文件内容：

<template>
  <view class="container">
    </view>
</template>

<script setup lang="ts">
// 页面逻辑将在这里编写
</script>

<style scoped>
/* 页面的局部样式将在这里编写 */
.container {
  padding: 15px;
  background-color: #f4f4f4; /* 设置一个淡灰色背景，让卡片更突出 */
  min-height: 100vh;
}
</style>

代码解释：

• <template>：这是页面的“骨架”，决定了用户能看到什么，也就是HTML结构。
• <script setup lang="ts">：这是页面的“大脑”，负责处理数据和用户交互等逻辑。setup是Vue3的语法糖，lang="ts"表示我们使用TypeScript语言（AI能轻松驾驭）。
• <style scoped>：这是页面的“化妆师”，负责页面的样式。scoped属性确保这里的样式只对当前页面生效，不会影响到其他页面。

精雕细琢：让AI“像素级”还原设计稿

接下来，我们将聚焦于health-record.vue文件，通过一系列指令，逐步构建出设计稿中的界面。

4.1 搭建页面骨架

选中<template>里的<view class="container">内部，再次呼出AI（Ctrl+K）。

指令 (Prompt):

在这个container内部，使用view组件搭建出页面的整体布局。从上到下依次是三个部分：

1. 一个用于“今日健康概览”的div，给它一个class叫 summary-card。
2. 一个用于“快速记录”的div，给它一个class叫 quick-actions。
3. 一个用于“步数趋势图”的div，给它一个class叫 trends-chart。

AI会更新<template>部分的代码：

<template>
  <view class="container">
    <view class="summary-card">
    </view>
    <view class="quick-actions">
    </view>
    <view class="trends-chart">
    </view>
  </view>
</template>

4.2 “今日健康概览”卡片开发

现在，我们来细化第一个模块。选中空的<view class="summary-card">，对AI下达更详细的指令。

指令 (Prompt):

帮我实现这个summary-card的内部结构和样式。要求如下：

1. 样式：白色背景，12px的圆角，上下20px的外边距，内部有15px的留白。
2. 布局：使用flex布局，内部均分为三个垂直的区域，分别用stat-item作为class。
3. 内容：
   • 第一个区域是步数：包含主标题’步数’，大号数字’6521’，和一个副标题’+15%'。
   • 第二个区域是心率：包含主标题’心率’，大号数字’72 bpm’，和一个副标题’正常’。
   • 第三个区域是睡眠：包含主标题’睡眠’，大号数字’7.2 h’，和一个副标题’不足推荐’。
4. 请直接生成完整的template和style代码。

AI会同时修改<template>和<style>部分：

关键源码 (health-record.vue):

<template>
  <view class="container">
    <view class="summary-card">
      <view class="stat-item">
        <text class="title">步数</text>
        <text class="value primary">6521</text>
        <text class="subtitle growth">+15%</text>
      </view>
      <view class="stat-item">
        <text class="title">心率</text>
        <text class="value">72 <text class="unit">bpm</text></text>
        <text class="subtitle">正常</text>
      </view>
      <view class="stat-item">
        <text class="title">睡眠</text>
        <text class="value">7.2 <text class="unit">h</text></text>
        <text class="subtitle warn">不足推荐</text>
      </view>
    </view>
    </view>
</template>

<script setup lang="ts">
// 逻辑部分暂时为空
</script>

<style scoped>
/* ... .container 样式 ... */

.summary-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 添加一点阴影增加质感 */
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

.stat-item .title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-item .value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-item .value .unit {
  font-size: 14px;
  font-weight: normal;
  margin-left: 2px;
}

.stat-item .value.primary {
  color: #007aff; /* 给步数一个主题色 */
}

.stat-item .subtitle {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.stat-item .subtitle.growth {
  color: #34c759; /* 增长用绿色 */
}

.stat-item .subtitle.warn {
  color: #ff9500; /* 警告用橙色 */
}
</style>

为什么这么做？
我们通过一条复杂的指令，将样式、布局和内容需求一次性告知AI。AI理解了flex布局，自动为我们写好了display: flex以及相关属性，并贴心地为不同状态的文字（如增长、警告）添加了不同的颜色。这就是AI的强大之处。

（后续的“快速记录”和“步数趋势图”等模块，也可以遵循同样模式，通过下达指令让AI生成，这里为保持篇幅，不再展示所有生成代码，但方法完全一致。）

4.5 配置底部导航栏

最后，我们来配置所有App都有的底部导航。这个操作不在.vue文件里，而是在pages.json。

在Cursor中打开pages.json文件，选中tabBar字段（如果不存在，就选中整个文件），呼出AI。

指令 (Prompt):

请帮我生成uni-app的tabBar配置。要求包含三个标签页：

1. “数据记录”，页面路径是 “pages/health-record/health-record”。
2. “图表分析”，页面路径是 “pages/analysis/analysis”。
3. “个人档案”，页面路径是 “pages/profile/profile”。
   请为每个标签页指定默认和选中状态的图标路径，路径先用占位符（例如 /static/images/record.png 和 /static/images/record-active.png）。

AI会生成准确的JSON配置：

// AI 生成的代码
"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#007AFF",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/health-record/health-record",
      "iconPath": "static/images/record.png",
      "selectedIconPath": "static/images/record-active.png",
      "text": "数据记录"
    },
    {
      "pagePath": "pages/analysis/analysis",
      "iconPath": "static/images/chart.png",
      "selectedIconPath": "static/images/chart-active.png",
      "text": "图表分析"
    },
    {
      "pagePath": "pages/profile/profile",
      "iconPath": "static/images/profile.png",
      "selectedIconPath": "static/images/profile-active.png",
      "text": "个人档案"
    }
  ]
}

代码解释：
你只需要将这段代码粘贴到pages.json的正确位置（与pages字段同级），然后将图标文件放到static/images目录下，一个标准的导航栏就配置好了。AI已经帮你处理了所有繁琐的字段名和路径格式。