Skip to Content
Handbook第 0 章：🚀 AI 编程入门指南0.5 核心概念速查

0.5 核心概念速查

看文档时遇到不懂的名词，直接复制丢给 ChatGPT / DeepSeek / 豆包，要求「用我能懂的方式解释」。

💡

使用方法:

  • 需要时查阅，不用背
  • 每个概念都有类比，帮助理解
  • 标注了「必懂」和「可选」，优先看必懂的

开发工具类 (必懂)

1. 终端 (Terminal / 命令行) ⭐

📱

类比: 终端就像给电脑发「指令短信」

  • 普通用户: 点击图标打开软件 (用鼠标)
  • 开发者: 在终端输入命令 (用键盘)

就像微信可以点击按钮也可以发指令，终端是「纯指令」版的操作方式。

在 AI 编程中的实际使用:

场景命令示例什么时候用
安装工具npm install第一次打开项目时
启动网站npm run dev每次想在浏览器预览时
查看报错(自动显示)网站出错时看红色文字
提交代码git add .保存代码到 GitHub 时

如何打开终端:

  • 在 Cursor: Control/Ctrl + ~ 或菜单 View → Terminal
  • Mac 系统: 打开「终端」App
  • Windows: 打开「命令提示符」或「PowerShell”
⚠️

新手常见困惑: 「为什么不能复制粘贴？”

  • Mac 终端： Cmd+C是复制， Cmd+V是粘贴 ✅
  • Windows 终端： 右键粘贴 ✅
  • 不要用 Ctrl+C 在终端，这是「中断命令」的意思！

2. 控制台 (Console) ⭐

🔍

类比: 控制台是网页的「体检报告”

  • 用户看到: 漂亮的网页界面
  • 开发者看到: 控制台里的运行日志和错误信息

就像医生看 X 光片，你看网页，开发者看控制台。

实际使用场景:

  1. 网页出错时: 打开控制台，看红色错误信息
  2. 调试功能: 查看「用户点击了什么」,「数据是否加载成功”
  3. 测试代码: 直接在控制台输入 JavaScript 试试效果

如何打开控制台:

  • Mac: Cmd + Option + J
  • Windows: F12 或 Ctrl + Shift + J
  • 通用方法: 右键网页 → 「检查」 → 点击「Console”标签
💡

新手必看: 控制台里的红色错误看不懂怎么办？

  1. 复制整段错误信息
  2. 粘贴给 AI，说「我遇到这个错误，怎么解决？”
  3. AI 会告诉你原因和修复方法

90%的错误都能这样解决！

3. IDE (集成开发环境) ⭐

全称: Integrated Development Environment

🏭

类比: IDE 是开发者的「瑞士军刀工作台”

  • Word: 只能写文字
  • Photoshop: 只能修图
  • IDE: 写代码+运行+调试+Git..。全在一个软件里

就像厨房有烤箱、炉灶、水槽，IDE 集成了所有开发工具。

AI 时代常用的 IDE:

IDE特点推荐指数
CursorAI 功能最强，多智能体协作⭐⭐⭐⭐⭐
Trae中文友好，适合国内用户⭐⭐⭐⭐
Windsurf新兴 AI IDE，界面简洁⭐⭐⭐
VS Code + Copilot传统 IDE+AI 插件⭐⭐⭐

新手建议: 直接用 Cursor，学习曲线最平缓。

代码托管与部署 (必懂)

4. GitHub ⭐⭐

☁️

类比: GitHub 是代码的「iCloud + 朋友圈”

  • iCloud 功能: 自动备份代码，换电脑也能继续开发
  • 朋友圈功能: 展示你的项目，别人可以查看、点赞(Star)、评论(Issue)

核心价值: 不怕电脑坏了，代码永远在云端！

核心概念速查表:

术语通俗解释类比
Repository (仓库)一个项目的文件夹网盘里的一个文件夹
Commit (提交)保存一个版本快照游戏存档点
Push (推送)上传到 GitHub 云端上传文件到网盘
Pull (拉取)从 GitHub 下载最新版本从网盘下载文件
Clone (克隆)完整复制一个项目到本地下载整个文件夹

实际使用流程:

注册账号: https://github.com  (用邮箱注册，免费)

5. Vercel / Netlify (部署平台) ⭐⭐

🚀

类比: Vercel 是「网站自动售货机”

  • 你投入: GitHub 上的代码
  • 它输出: 一个任何人都能访问的网址

传统方式: 需要租服务器、配置环境、上传文件 (很复杂) Vercel 方式: 连接 GitHub，点击「Deploy”，等 2 分钟 (超简单)

两大主流平台对比:

平台优势适合场景
Vercel速度最快，Next.js 原生支持Next.js 项目 (首选)
Netlify界面友好，功能全面静态网站、博客

免费额度:

  • ✅ 无限网站托管
  • ✅ 自动 HTTPS
  • ✅ 全球 CDN 加速
  • ✅ 自定义域名

注册: Vercel  | Netlify  (用 GitHub 账号登录)

6. 部署 (Deploy) ⭐

📦

类比: 部署就是「把外卖装好，送到顾客手里”

  • 本地代码: 厨房里的菜 (只有你能吃)
  • 部署后: 外卖送达 (全世界都能访问)

关键: 部署前网站只能在你电脑上跑，部署后有了公开网址！

完整部署流程:

验收标准:

  • ✅ 手机和电脑都能打开
  • ✅ 分享链接给朋友，他们也能看到
  • ✅ 没有「localhost”字样 (有的话说明还没部署成功)

前端技术栈 (必懂)

7. 前端 vs 后端 ⭐⭐

🏪

类比: 开网店

角色职责对应技术
前端店铺装修，顾客看到的界面HTML, CSS, JavaScript, React
后端仓库管理，处理订单，管账Node.js, Python, 数据库

举例:

  • 你在淘宝看到的商品图片、按钮、动画 → 前端
  • 点击「购买」后，扣库存、生成订单 → 后端

AI 编程时代的变化：

  • 传统：前端、后端需要分开学，各学 1-2 年
  • AI 时代：AI 帮你搞定前端 + 后端，你只需要描述需求

新手建议：先学前端（看得见摸得着），后端有需要再学。

8. React / Next.js ⭐⭐

🧱

类比: 搭乐高积木

  • 传统 HTML: 每个零件都是自己捏的泥巴 (慢)
  • React: 有现成的积木块，拼起来就行 (快)
  • Next.js: React 的「豪华套装」，多了很多开箱即用的功能

举例:

  • 做一个按钮： HTML 需要写 10 行，React 只需要 1 个组件
  • 做 100 个按钮： 复制 React 组件，修改文字即可

关系图:

Next.js (最推荐,开箱即用)
  ↓ 基于
React (组件化思想)
  ↓ 基于
JavaScript (编程语言)
  ↓ 基于
HTML/CSS (基础)

新手建议: 直接用 Next.js，不要从 HTML 开始学 (AI 时代不需要)

9. npm / 依赖包 ⭐

📦

类比: npm 是「代码版的淘宝”

  • 你的需求: 「我想要一个轮播图功能”
  • npm: 有 100 个现成的轮播图库，选一个装上就能用

不用 npm: 自己从零写 2000 行代码 用 npm: 运行 npm install swiper,10 秒装好

核心命令:

命令作用什么时候用
npm install安装所有依赖包第一次打开项目 / 别人给你代码时
npm install xxx安装特定的包需要新功能时 (如图表、动画)
npm run dev启动开发服务器每次想预览网站时
npm run build构建生产版本部署前，生成优化后的代码

package.json 是什么？

  • 类比: 购物车清单
  • 内容: 列出了这个项目需要哪些依赖包
  • 作用: 运行npm install时，npm 会根据这个清单下载所有东西

进阶概念 (可选，遇到再查)

10. API (接口) ⭐

🔌

类比: API 是「外卖平台的接口”

  • 你(前端): 「我要一份宫保鸡丁”
  • API: 把订单传给后厨
  • 后厨(后端): 做菜，通过 API 送回来

关键: 你不需要知道厨房在哪、菜怎么做，只需要「下单」和「收餐」。

实际例子:

// 调用天气API获取今天天气
fetch('https://api.weather.com/today')
  .then(response => response.json())
  .then(data => {
    console.log(data.temperature) // 显示温度
  })

常见 API 类型:

  • OpenAI API: 调用 GPT 生成文本
  • 支付 API: 处理付款 (Stripe, PayPal)
  • 地图 API: 显示地图 (Google Maps)

11. 数据库 (Database) ⭐

🗄️

类比: 数据库是「Excel 的专业版”

  • Excel: 适合存几千条数据，手动查找
  • 数据库: 能存几百万条，瞬间查询

举例:

  • 网站的用户账号、密码 → 存在数据库
  • 电商的订单记录 → 存在数据库
  • 博客的文章内容 → 存在数据库

常见数据库:

类型例子特点适合场景
关系型PostgreSQL, MySQL数据有明确关系，像 Excel 表格用户系统、订单系统
非关系型MongoDB数据灵活，像 JSON日志、社交内容
轻量级SQLite单文件，不需要服务器小项目、移动 App

新手建议: 先不碰数据库，用免费的 BaaS 服务 (如 Supabase、Firebase)

12. 环境变量 (Environment Variables)

🔐

类比: 环境变量是「保险柜里的密码本”

  • 不该公开: API 密钥、数据库密码
  • 不同环境不同值: 开发环境用测试数据库，生产环境用真实数据库

为什么需要？

  • ❌ 直接写在代码里 → 代码上传 GitHub，密码泄露！
  • ✅ 存在环境变量 → 代码可以公开，密码安全！

使用示例:

# .env.local 文件 (不上传到GitHub)
OPENAI_API_KEY=sk-abc123...
DATABASE_URL=postgresql://...
// 代码里读取
const apiKey = process.env.OPENAI_API_KEY

重要: .env.local 文件要加到 .gitignore，避免上传到 GitHub!

13. localhost / 127.0.0.1

🏠

类比: localhost 是「你电脑的内网地址”

为什么开发时用 localhost?

  • 速度快 (不需要上传)
  • 方便调试 (改代码立即看到效果)
  • 不影响线上网站

常见端口号:

端口常见用途
:3000Next.js 默认端口
:5173Vite 默认端口
:8080通用开发端口

什么时候看到 localhost?

  • 运行 npm run dev 后
  • 终端会显示： 「Local: http://localhost:3000 ”
  • 在浏览器打开这个地址，就能看到你的网站

快速查询表

遇到这些情况，应该。..

问题解决方法
终端报错看不懂复制完整错误 → 问 AI
网站打不开检查是否运行了 npm run dev
改了代码没效果刷新浏览器 (Cmd/Ctrl + Shift + R 强制刷新)
npm install 很慢换国内镜像源 (问 AI: 「如何配置 npm 淘宝镜像」)
不知道某个文件是干嘛的右键文件 → 问 AI: 「这个文件的作用是什么？」
🎯

记住: 这些概念不需要背！

  • 第一次看: 快速浏览，有个印象
  • 开发时遇到: 回来查这个速查表
  • AI 帮你: 大部分情况下，告诉 AI”我是新手「，它会用你能懂的方式解释

学习顺序: 先用 → 再懂 → 最后深入。不要反过来！

下一节: 学习路径建议 - 选择适合你的学习节奏。

Last updated on
0.4 核心思路与原则0.6 学习路径与技能树