早报站的API已经能注册、登录、收藏------但用户看到的 还是那个Jinja2旧页面。
现在开始给早报站装上现代前端。
今天不写业务代码，先建立世界观、装好环境------这是前端版的环境篇。
🎯 本篇产出：Node/Vite环境就绪、脚手架项目跑起来、以及一张 "后端概念 → 前端对应物"的翻译表。
📌 太长不看版（给想快速上手的你）
| 项目信息 | 一句话说明 |
|---|---|
| 本篇目标 | 建立前端世界观 + 装好Node/Vite环境 |
| 代码行数 | 0行（环境篇） |
| 依赖 | Node.js LTS（20或22）+ Vite脚手架 |
| 核心功能 | npm create vue@latest跑起默认页 |
| 跑起来的命令 | npm run dev → http://localhost:5173 |
| 核心知识点 | 声明式渲染、组件化、翻译表 |
| 做完你能得到 | 一套前端工具链 + 一张概念翻译表 |
一、先回答灵魂问题：为什么需要前端框架？
你在用Jinja2做的页面其实 "能用"------为什么还要学Vue？用一个小需求对比：
📖 需求：文章卡片上有一个 "👍 点赞"按钮，点一下数字+1
Jinja2时代（服务端渲染）的做法：
text
① 点按钮 → 发一个请求到后端
② 后端把数字+1，重新渲染整张页面返回
③ 浏览器整页刷新，滚动位置丢失🚨 每个小交互都是 "一次完整的页面往返"。页面简单时还行，交互一多（搜索框联想、弹窗、局部刷新）就会写成 "jQuery面条"------手动找元素、手动改内容、状态和页面各记一套账，改着改着就对不上。
🎯 前端框架的答案：声明式渲染
你只声明 "视图长什么样取决于什么数据"，框架负责让视图跟着数据自动变：
javascript
// Vue的心智模型（伪代码）
const count = ref(0) // 数据
// 视图里写 {{ count }} // 声明：这里显示count
// count变了 → 那一块视图自动更新 // 框架的活，不是你的活📌 数据是唯一的账本，视图是数据的投影。 这就是 "声明式渲染"四个字的全部含义，也是React/Vue/Svelte所有现代框架的共同内核。
🧩 第二个理由：组件化
把页面拆成可复用的积木（文章卡片、导航栏、按钮），一处定义处处使用------你在重构Python代码时体会过的 "函数拆分 "，在前端叫 "组件拆分"，思想完全同源。
二、第二课：工具链为什么存在------一张翻译表
后端读者学前端最大的心理障碍是 "全新世界"。好消息：概念你已经全会了，只是换了名字：
| 你已经会的（Python侧） | 前端对应物 | 说明 |
|---|---|---|
| requirements.txt | package.json | 依赖清单 |
| pip / venv | npm / node_modules | 包管理器 / 依赖目录 |
| uvicorn --reload | Vite dev server | 开发热重载 |
| pytest | Vitest | 测试框架 |
| gunicorn + 打包发布 | vite build → dist/ | 构建产出部署物 |
| Flask蓝图 | Vue Router | 页面/模块路由 |
| Pydantic模型 | TypeScript类型 / props | 数据契约 |
📌 Node生态只是用JavaScript重演了一遍你已经掌握的工程概念。 这张表会贴在本季每一篇前端文章的开头。
🤔 Node到底是什么？
一句话：JavaScript的运行时------让JS脱离浏览器也能跑（就像Python解释器之于Python）。有了它，前端才能拥有 "后端式"的工具链：包管理、构建、测试。
🤔 Vite是什么？
现代前端的开发服务器 + 打包器：开发时秒级热重载，发布时把代码打包优化成浏览器友好的静态文件。
三、第0步：装环境
text
1. 安装Node.js LTS版（20或22）：nodejs.org下载，或用nvm管理多版本
2. 验货：node -v 和 npm -v 都有版本号
3. 建项目：npm create vue@latestnpm create vue@latest是官方脚手架，交互式问你几个选项------本篇全部选No （不需要TypeScript/Router/Pinia，后面篇章用到了再加），项目名daily-front：
bash
cd daily-front
npm install
npm run dev浏览器打开http://localhost:5173------Vue的默认欢迎页。
🎉 改一行App.vue里的文字保存，浏览器瞬间更新 ------这就是Vite热重载，和
uvicorn --reload是同一种爽。
四、认识脚手架：目录导览（翻译表实战）
text
daily-front/
├── node_modules/ # 依赖目录（≈ venv，巨大，别提交进git）
├── public/ # 原样拷贝的静态文件
├── src/ # 你的代码全在这
│ ├── App.vue # 根组件（≈ main.html的骨架）
│ ├── main.js # 入口：创建应用并挂载（≈ main.py）
│ ├── components/ # 组件目录
│ └── assets/ # 素材目录
├── index.html # 唯一的HTML（SPA：单页应用就这一页壳）
├── package.json # 依赖清单 + 脚本命令（≈ requirements.txt）
└── vite.config.js # Vite配置（≈ 项目的构建参数）🔑 SPA（单页应用）是新概念
📌 整个网站只有一个HTML壳 ，页面切换由JavaScript在壳内完成------所以路由也归前端管（后续Vue Router）。
后端从此只负责出数据（API），不再渲染页面------这就是 "前后端分离"的字面意思。
五、三条前端守则（阶段二的规矩）
| # | 守则 | 说明 |
|---|---|---|
| ① | 组件跑起来才算过 | 与后端 "接口返回JSON"同理，前端的一切验收在浏览器 |
| ② | npm install之后必看package.json | 知道装了什么、哪些是脚本命令 |
| ③ | 报错先看终端，再看浏览器控制台（F12 → Console） | 前端报错有一半在浏览器里，另一半在终端里，两头都要会看 |
六、常见报错：这6个，前端环境第一天的高发区（重点！）
① npm : 无法将 "npm"识别为cmdlet / command not found
🔍 原因：Node没装或没进PATH------第2篇Python环境的同款剧情。
✅ 解法 ：装Node LTS后重开终端 ；node -v验证。
② npm ERR! EACCES: permission denied
🔍 原因：全局安装时权限不够，尤其Mac/Linux。
✅ 解法 ：别用sudo npm -g硬怼------用nvm管理Node（多版本切换 + 免权限问题，一劳永逸）。
③ create-vue@latest拉取龟速或超时
🔍 原因：npm默认源在国内不稳。
✅ 解法：
bash
npm config set registry https://registry.npmmirror.com装完想换回官方源同理。
④ Vite报Node.js version is too old
🔍 原因：Node版本低于Vite要求（20+）。
✅ 解法 ：nvm安装新LTS并nvm use。
📌 前端工具链对Node版本和Python对解释器版本一样敏感。
⑤ 端口5173被占用
🔍 原因：上一个dev server没关。
✅ 解法：
Ctrl+C关掉；- 或
npm run dev -- --port 5174换端口。
⑥ node_modules体积巨大，想提交进git
🔍 原因：不是错误，是认知------node_modules动辄几百MB且可由package.json完整复原。
✅ 解法 ：进.gitignore（脚手架已自动加）。
📌 package.json是清单，node_modules是按清单重建的货------只提交清单。
七、课后练习
| # | 练习 | 难度 | 提示 |
|---|---|---|---|
| 1 | 改壳：把App.vue的默认文案换成 "Python早报 · 前端施工中"，保存观察热重载 | ⭐ | 体会Vite的热重载 |
| 2 | 看产物 ：跑npm run build，观察生成的dist/目录 |
⭐⭐ | 这就是将来部署到Nginx的静态文件 |
| 3 | 对照表自测：不看上文，说出package.json / node_modules / vite build各对应Python世界的什么 | ⭐ | 检验翻译表记牢没 |
| 4（选做） | 官方互动教程：Vue官网的交互式教程过一遍前两章 | ⭐⭐ | vuejs.org → 教程 |
📦 配套代码
脚手架项目已上传Git（python_daily/，node_modules不入仓）：【gitee仓库地址】