LESSON 01 · 幕后之旅 / START A PROJECT
一切从一个答不上来的问题开始。
情景
你在对话框里敲下「帮我做个网站」。AI 秒回：可以。用什么技术栈？你盯着这五个字看了半分钟——技术栈是什么栈？它接着追问：React 还是 Vue？要不要服务端渲染？你一个字也答不上来，只好说「你定吧」。于是这个网站会长成什么样，从这一刻起就不归你管了。
本课 13 个概念 · 约 3 分钟
AI 的第一串追问就发生在这里：用什么写，长什么样。
前端最核心的编程语言，负责页面交互和逻辑。
跟 AI 这么说
先用原生 JavaScript 搭一个能打开的页面：按钮能点、文字能改、点击能跳转，不接任何框架和库。
JavaScript 的超集，增加了类型系统，适合大型项目。
跟 AI 这么说
把项目从 JavaScript 改成 TypeScript，给每个函数和数据都写上类型，类型报错全部修掉再往下写。
Facebook 推出的前端 UI 库，基于组件和状态管理。
跟 AI 这么说
用 React 搭这个网站，把页面拆成导航、内容列表、页脚几个组件，数据一变界面自动更新。
基于 React 的全栈框架，支持服务端渲染和静态生成。
跟 AI 这么说
用 Next.js 起项目：首页要能被搜索引擎抓到（服务端渲染），再加一个 /about 的静态页面。
原子化 CSS 框架，通过类名直接写样式。
跟 AI 这么说
样式用 Tailwind CSS 写，直接在标签上加类名实现卡片圆角、阴影和 hover 变色，不要再单独建 CSS 文件。
基于 Tailwind 和 Radix UI 的组件库。
跟 AI 这么说
界面用 shadcn/ui 的现成组件拼：按钮、弹窗、表单直接引用它的，别自己从零画。
材料定了，接下来是怎么运进来、怎么打包带走。
如 npm、yarn、pnpm，管理项目依赖包。
跟 AI 这么说
用 pnpm 当这个项目的包管理器，装依赖、删依赖都走它，别手动改 node_modules 里的文件。
锁定依赖版本，确保每次安装结果一致。
跟 AI 这么说
把 package-lock.json 提交进仓库：团队里每个人安装的依赖版本都要和它完全一致。
新一代前端构建工具，开发启动极快。
跟 AI 这么说
用 Vite 做开发服务器，改完代码页面要秒级热更新；如果启动变慢，先检查是不是装太多插件。
把源代码编译打包为可部署文件的工具。
跟 AI 这么说
执行一次构建，把源代码打包成能部署的静态文件，确认产物里的路径和资源大小都正常。
上线之前，让三道自动检查替你把关。
在编译阶段检查数据类型是否正确。
跟 AI 这么说
跑一遍类型检查，把报错逐条列出来修掉，不要用 any 把错误糊弄过去。
自动检查代码风格和质量问题的工具。
跟 AI 这么说
开启 linting 并设成报错级别：未使用的变量、漏掉的依赖项这些不规范写法不许进代码。
对代码做自动化验证以保证质量。
跟 AI 这么说
给「提交订单」写一条自动化测试：正常下单成功、库存不足报错两种情况都要覆盖到。
试一试
选择题 · 选一个你认为最合适的答案