讲稿是视频内容的大致框架，详细内容可能有缺失，请见谅!
《浅谈前端与 Vibe Coding》讲稿¶
今天更想帮大家建立一条主线：一个前端项目到底是怎么从想法，变成代码，再变成浏览器里可以交互的页面的。
vibe coding 不是随便跟 AI 说一句“帮我做个网页”，而是要把它当成一个小型项目来规划。你越能把需求讲清楚，AI 给你的结果就越接近能用的项目。
第一层是表达层，主要是 HTML 和 CSS。 HTML 负责页面结构和语义，CSS 负责样式和布局。
第二层是行为层，主要是 JavaScript 或 TypeScript。 这一层让页面真正“动起来”。
第三层是框架层，比如 React 和 Vue。 框架帮我们用组件化的方式组织页面，也让状态和 UI 的关系更清楚。 第四层是工程层，比如 npm、Vite、Git、部署。 这一层解决的是项目怎么组织、怎么安装依赖、怎么本地开发、怎么构建、怎么上线。
比较推荐大家用一个小项目贯穿学习
比如我们可以用一个“论文卡片搜索页”作为贯穿项目。
第一步，做静态页。 只用 HTML 和 CSS，先把标题、搜索框、论文卡片这些东西摆出来。这个阶段不需要交互，重点是能看见页面结构。
第二步，加交互。 用 JavaScript 实现搜索、筛选、空状态。比如搜索 “agent”，页面只显示标题或摘要里包含 agent 的论文；如果没有结果，就显示“没有找到相关论文”。
第三步，组件化。 用 React 或 Vue，把页面拆成 SearchBar、PaperCard、TagFilter 这些组件。这样代码会更清楚，也更接近真实项目。
第四步，工程化。 用 Vite 创建项目，学习 npm run dev、npm run build，以及最后怎么 deploy 到 GitHub Pages等等。
这里我们做一个小互动题。
这里答案是 C，JS 事件绑定。
实际排查的时候可以先打开浏览器 Console，看有没有报错，再看 onClick、addEventListener 或者对应的状态更新逻辑。
浏览器其实可以理解成一台渲染与执行引擎。我们在地址栏输入 URL 后，它不是直接“显示网页”，中间有很多步骤。
第一步是请求。 浏览器通过 DNS 找到服务器地址，然后通过 HTTP 请求拿到 HTML、CSS、JS 等资源。
第二步是解析。 浏览器把 HTML 解析成 DOM 树，把 CSS 解析成 CSSOM。DOM 可以理解成页面结构树，CSSOM 可以理解成样式规则树。
第三步是执行。 JavaScript 会被浏览器执行，它可以修改 DOM，也可以请求数据，还可以响应用户事件。
第四步是渲染。 浏览器会进行 Layout，也就是计算每个元素的位置和大小；然后 Paint，把它们绘制出来；最后 Composite，把不同图层合成到屏幕上。
第五步是交互。 用户点击、输入、滚动时，会触发事件，事件里可能更新状态，状态更新后页面又会重新渲染。
HTML 会形成结构树 DOM。
CSS 会形成样式规则 CSSOM。
JavaScript 负责事件、状态和更新。
那为什么我们要有 React 或 Vue 呢？
它们的核心不是“语法更高级”，而是状态驱动 UI。
状态变化，UI 自动更新。
组件也是这个思路的一部分。 一个搜索框组件负责输入，一个卡片组件负责展示单条数据，一个筛选组件负责选择标签。最后这些组件组合起来形成页面。
构建工具做的事情，是把“方便开发的代码”变成“适合浏览器加载的文件”。
第一是源码。 比如 src 目录里放组件、样式、图片和其他资源。
第二是依赖。 package.json 里记录项目依赖和脚本
第三是开发。 开发时我们通常会启动一个 dev server，也就是本地开发服务器。
第四是构建。 当项目要上线时，会执行 build，把代码压缩、拆包、优化，最后输出到 dist 目录。
第五是部署。 部署就是把 dist 里的静态文件放到服务器或静态托管平台上，让别人可以访问。
这一页把几个常见词再讲清楚一点。
npm npm install 安装依赖，npm run dev 启动开发，npm run build 执行构建。
Vite dev
build把项目变成真正适合上线的静态文件，比如压缩代码、处理资源路径、输出 dist 目录。
deploy 这一页和后面 vibe coding 的关系很大。
AI 是助手，不是总替代。
“帮我做个好看的网页。”
这个 prompt 太空泛。
没有约束。
没有数据。 （有没有 loading、error、empty 状态）
我建议用四步工作流：任务规划，一次性 prompt，运行验收，具体迭代。
第一步是规划。 你要先想清楚目标用户是谁，MVP 功能是什么，不做什么。
第二步是 Prompt。 在 prompt 里明确技术栈、页面结构、数据、交互和输出形式。
第三步是验收。 生成代码之后，不是看着像就结束，而是要真的 npm run dev 跑起来，检查页面、交互和 Console 有没有报错。
第四步是迭代。 迭代时不要说“再好看一点”，而要说具体问题。
1 2 3 4 5 6 | |
先看框架。
如果你选 Vanilla，也就是原生 HTML、CSS、JS，它适合学基础原理。好处是没有框架负担，能看清 DOM 和事件是怎么工作的。
如果选 React，它适合讲组件和状态，也是现在很常用的前端框架。课堂项目、课程作业、小工具都很适合。
如果选 Vue，它的模板语法比较直观，对初学者也很友好。
如果选 Next，它更像正式产品雏形，适合涉及路由、服务端渲染、全栈功能的项目，但入门分享里不一定需要一上来讲。
再看构建工具。
无构建适合 5 分钟单文件 demo，比如一个 index.html 加一点 CSS 和 JS。
Vite 是课堂首选，因为它启动快，结构简单，也很贴近真实项目。
Next 内置构建和路由，更适合正式产品，但概念更多。
再看语言。
JavaScript 学习负担小，适合初学。 TypeScript 会让字段、props、函数类型更清楚，适合稍微规范一点的项目，也适合和 AI 配合，因为类型能减少很多猜测。
再看样式。
普通 CSS 最适合课堂讲解，因为每个人都能看懂。 CSS Modules 更适合组件化项目。 Tailwind 写起来很快，但对初学者来说不一定直观，因为大量类名堆在 HTML 或 JSX 里。
再看数据来源。
mock data 最适合课堂，因为稳定，不依赖网络和后端。 JSON 文件可以模拟真实数据。 API 更接近真实项目，但要处理请求失败、加载中、跨域等问题。
最后看输出。
HTML 适合 5 分钟 demo。 App.tsx 加 CSS 适合现场替换代码。 完整目录适合课后项目模板。
完整示例。
请用 React + Vite + TypeScript 实现“科研论文卡片搜索页”。
目标用户是刚接触科研和前端的本科生。
MVP 包括搜索、标签筛选、卡片展示、空结果提示。 不做登录、不做后端、不做收藏。
输出 App.tsx 和 App.css，使用普通 CSS，适合课堂讲解。
数据使用 6 条 mock paper，字段包括 id、title、authors、year、tags、summary。
状态包括 searchQuery 和 selectedTag，并且搜索和标签筛选要同时生效。
视觉上要求简洁学术，白底蓝色强调，桌面端两列，移动端单列。
验收标准是 npm run dev 可以运行，搜索、筛选、空状态可用，Console 没有报错。
第二个互动题。
所以我们在用 AI 写前端的时候，其实不是在“放弃思考”，而是要把思考前置。先把任务想清楚，再让 AI 帮我们实现。
最后做一个总结。
今天这次分享只是面向入门同学的“浅谈”。前端生态变化很快，我讲的内容也可能存在不准确、不完整，或者为了方便理解而简化的地方。欢迎大家课后批评指正，也欢迎补充更多实际经验。
课程中提到的prompt模版我放在这个 GitHub 地址里：
https://github.com/chenerApple/2026-_-.git
大家有需要可以看一看
谢谢大家！