不要求你先成为程序员，但要懂文件、变量、函数、组件、数据结构和错误日志。
- 学习结果
- 理解 AI 写代码时常见的基础概念，能看懂它在改什么、错在哪里、如何验收。
- 时长
- 2-3 小时
- 难度
- 零基础
- 核验
- 尚未进入本轮核验
正文
文件目录决定代码放在哪里。页面、组件、样式和数据通常分开保存。修改卡片标题之前，先找到标题是写在组件里还是从数据文件读取；改错层次可能把所有卡片变成同一个标题。查看文件路径和导入关系，比记住框架名字更有用。
变量和类型描述一份信息。字符串保存标题，数字保存价格，布尔值表示是否上架；对象组合一件产品的字段，数组保存多件产品。{ title: "计时器", price: 29 } 中，29与"29"不是相同类型，字符串相加可能得到拼接结果而非总价。
函数把输入变成输出。formatPrice(29)可以返回“¥29”，保存订单的函数则可能写入数据库。读函数时找参数、返回值和外部操作，区分纯计算与会改变系统的动作，避免在页面渲染时意外发送邮件或扣款。
组件复用结构而不是复制整页。产品卡片接收title、price、url等参数，价格单位应由格式化逻辑处理，公共间距应由样式处理，某件产品的价格应在数据中修改。把数据、展示和行为区分开，能减少误改。
错误日志提供排查入口。先读错误类型、文件路径和行号，再看调用栈。Cannot read properties of undefined常表示对象不存在；检查数据缺失、异步请求和空列表，而不是反复改拼写。第一条自己代码引发的错误通常更接近原因。
预览和构建解决不同问题。预览观察交互，构建检查项目能否生成发布产物；通过构建不代表按钮有效。修改卡片后检查长标题、零价格、缺图片和窄屏，保存版本差异。AI解释需要和实际文件及运行结果对应，配置中的密码和真实用户信息不要直接发到聊天中。
学习步骤
- 先理解文件和目录：代码不是一整块文字，而是按页面、组件、样式、数据拆成多个文件。
- 理解变量、对象和数组：它们是保存标题、价格、用户、项目列表这些信息的基本容器。
- 理解函数和组件：函数负责处理动作，组件负责复用一块界面。
- 理解错误日志：报错不是失败通知，而是告诉你哪个文件、哪一行、什么原因出问题。
- 每次让 AI 改代码后，都要让它说明改了哪些文件、为什么改、怎么验证。
场景拆解
读懂并修改产品卡片
练习页包含三件商品：售价29元的计时器、售价0元的便签，以及一件长标题商品。统一显示价格，但保持数据中的price仍是数字。
- 定位组件与数据文件，标出每个字段类型。
- 只修改价格显示函数，保留原始价格供计算。
- 查看零价格、长标题、缺图和手机页面，记录错误行。
合格结果是0显示“免费”、29显示“¥29”，商品数据和链接不变。长标题遮住价格属于布局问题，不能通过删除标题文字掩盖。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
代码的基本组成
- 文件与目录：组织代码
- 变量、对象、数组：表达数据
- 函数：处理输入与动作
- 组件：复用界面
- 构建：把源码转换为可运行产物
一次改动的可检查证据
- Diff：哪些文件与逻辑发生变化
- 错误日志：文件、行号、原因
- 预览：页面与交互的实际结果
- 构建记录：语法与依赖是否可用
AI 输出与真实结果的区别
- 解释合理 ≠ 代码正确
- 构建通过 ≠ 用户路径通过
- 局部改动 ≠ 没有影响其他页面
- 报错截图需要结合关键日志行
02 实践练习
根据文章内容记录自己的判断与依据。
读懂并修改产品卡片
本练习从商品字段追踪到组件显示，修改价格格式，再用缺图状态练习日志定位；每一步都保留原始数据与商品链接。
练习场景
练习页包含三件商品：售价29元的计时器、售价0元的便签，以及一件长标题商品。统一显示价格，但保持数据中的price仍是数字。
准备材料
- 准备三条样例商品。
- 找到项目已有启动和构建命令。
检查点
- price从29变成"29"时，计算与显示各会怎样？
练习步骤
01 / 辨认类型
时间： 20-30 分钟
目标： 区分存储数据和页面文字
操作：
- 标出title、price和published的类型。
- 找到组件读取它们的位置。
参考结果： price:0是数值，“免费”是显示字符串。
预期产出： 字段到显示位置的对应表。
检查： 能指出价格原值与显示文字分别在哪里。
02 / 修改显示
时间： 20-30 分钟
目标： 不让排版改变计算
操作：
- 实现数字到文本的价格格式。
- 比较0、29和缺失价格。
参考结果： 0→免费；29→¥29；缺失→暂无价格。
预期产出： 三种输入的显示记录。
检查： 原始price没有被字符串覆盖。
03 / 定位报错
时间： 20-30 分钟
目标： 从日志追溯缺失数据
操作：
- 删除练习数据中的图片字段。
- 记录错误位置并提供明确缺图状态。
参考结果： 缺图时卡片仍显示标题和链接。
预期产出： 复现与修复截图。
检查： 能区分数据缺失与组件错误假定。
完成检查
- 能指出价格原值与显示文字分别在哪里。
- 原始price没有被字符串覆盖。
- 能区分数据缺失与组件错误假定。
03 清单、模板和关键词
用于项目记录和自查。
项目记录
文件目录：____变量：____对象：____数组：____函数：____组件：____样式：____错误日志：____构建命令：____
代码阅读表
文件路径：；组件：；输入字段和类型：；数据来源：；返回的界面：；会调用接口的函数：；缺字段行为：。示例：ProductCard接收title:string、price:number；formatPrice只返回文本，不修改订单金额。
错误记录
操作：；错误首行：；文件与行号：；出错时数据：；复现步骤：；修复结果：；尚未覆盖状态：。记录中去除密码与真实邮箱，保留足以复现的样例数据，再比较修复前后的页面。
关键概念
- 文件目录
- 变量
- 对象
- 数组
- 函数
- 组件
- 样式
- 错误日志
- 构建命令
容易误判
- 完全不看 AI 改了什么
- 把报错截图直接丢给 AI 却不读关键行
- 一次让 AI 改太多需求
- 不会运行 build 或预览命令
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- Codex
- ChatGPT
- VS Code
- MDN
- GitHub