Vue3 + FastAPI 全栈自学计划（一人开发版）

背景：有 Python 基础，正在学 HTML/CSS，不了解 JS 和 Vue。目标：独立开发一个能跑起来的网站。
节奏预估：每天 2-3 小时。自用小工具: 1月-1.5月；公开注册登录版: 2-3月起——Cookie+CSRF 那套安全逻辑如果是第一次做，上限可能要往后松动一点，别把 8 周当成硬指标。
本计划为 Deepseek / Kimi / Claude / Gemini 多轮讨论后的共识版本（v9）。

环境准备（动手前一次性做完，避免中途卡壳）

预估时间：0.5-1 天

阶段一：HTML/CSS 扫盲

预估时间：2-3 天

必学：

暂不学（不是禁区，遇到再学）：

  • position（sticky/absolute 等，做下拉菜单、弹窗时会用到）
  • 动画、CSS Grid、预处理器

自测标准： 不用 float，能用 flex 复刻一个卡片列表 / 表单 / 按钮居中的布局。

阶段二：JS 核心语法（必须敲代码）

预估时间：4-6 天

必学：

跳过： class 类、原型链（Vue3 组合式 API 用不到，Python 背景也不需要现在补）

自测标准： 给定 [{name:'a'},{name:'b'}]，能用 map 打印所有 name，能用 filter 过滤。

阶段三：异步请求（前后端通话，关键分水岭）

预估时间：2-3 天

必学：

自测标准： 调通 FastAPI 的 GET 接口，把返回 JSON 用 console.log 打印出来；请求失败时能被 try/catch 捕获并给出提示。

提醒： 做到这一步，立刻切入 Vue3，不要在 JS 上继续深挖。

阶段四：Vue3 入门

预估时间：4-6 天

开始前： 确认 Node.js 已装好，执行 npm create vue@latest 创建项目，跑通 npm run dev

学习顺序（不要打乱）：

跳过： 选项式 API（老语法），不用专门学，能看懂即可

自测标准： 把阶段三的 axios 代码搬进 Vue，用 v-for 渲染成列表页面。

阶段五：Vue3 进阶（按需，不要一上来全家桶）

预估时间：3-4 天

必学：

    • 说明：MVP 本来就要列表页+详情页两个页面，所以 Router 不算"延后项"，这里就该学最小用法；真正该延后的是嵌套路由、导航守卫、懒加载这些进阶功能

延后（真的需要再学，先用组件本地状态和 props 传参撑住）：

  • Pinia（状态管理）

自测标准： 做一个带"列表页 + 详情页"的小 Demo，通过 Router 跳转，组件间能传参。

阶段六：FastAPI 后端开发

预估时间：自用版 4-6 天（不含 Cookie+CSRF）；公开注册版 7-10 天（这是全计划最重的阶段——CRUD、版本对齐、安全底线都在这里，公开版还要走完整套 Cookie+CSRF 切换）

开始前： python -m venv .venv 建独立虚拟环境并激活，再装依赖

数据库：开发期用 SQLite，部署再切 MySQL

必学（版本对齐，很多旧教程已过时，务必用最新写法）：

安全底线（不因为是一人开发而省略）：

是否需要登录/JWT，先想清楚：

  • 只给自己或身边人用的小工具 → 可以先用固定访问密钥，甚至暂不鉴权
  • 要公开给陌生人注册使用 → JWT + 密码哈希从第一天就不能省
  • 登录态存储：没上 Pinia 前用 localStorage 顶住没问题，MVP 阶段可以先简单。触发切换的信号是：从 localhost/内网自用，变成"公网可访问 + 非受信任用户可注册/登录"——不是"发不发域名给别人"，朋友内部测试可以还算受信任范围
    • 切换时机：正式部署前，当成一个固定任务提前一个周末做完，不要上线当天现改
    • 切换方案（不是换成 OAuth2PasswordBearer——那只是从 Authorization 头取 token，跟 Cookie 安全是两回事，换错了 XSS 风险照样在）：
      • 后端登录成功后 Set-Cookie：HttpOnly、Secure、SameSite=Lax/Strict
        • 执行提醒：Secure 要求 HTTPS 才会被浏览器发送，本地 HTTP 调试阶段先关，不然会遇到"localhost 登录态莫名丢失"排查半天；开发环境先只用 HttpOnly + SameSite，部署到 HTTPS 后再打开 Secure，让它跟着环境变量走
      • 前端 axios 请求带 withCredentials: true
      • CORS 改白名单 origin 并允许 credentials，不能再用 *
      • 补 CSRF 防护：SameSite 之外，关键写操作加自定义头校验或 CSRF token
      • 登出逻辑要清 Cookie
      • 测试补：未授权返回 401、无 CSRF 头的跨站写请求应失败
      • 切完跑一遍手动验收清单，前端/后端/CORS/测试一起切，别只改一半

自测标准： 写出 POST（增）/GET（查）/PUT（改）/DELETE（删）全套接口，在 /docs 里调试通，非法输入能看到 422 报错。

阶段七：MVP 联调（终点，不是"全栈开发者认证"）

预估时间：自用版 3-5 天；公开注册版 7-10 天（含测试补充、部署演练、正式部署，公开版还要走完 Cookie+CSRF 切换清单）

目标范围（严格锁死，不要膨胀）：

  • 列表页 + 表单提交 + 详情页（+ 视需求决定要不要登录）

明确后置，不要在 MVP 里加：

  • WebSocket、复杂权限系统、SSR/Nuxt、微服务、消息队列
  • Alembic 迁移（表结构还在剧烈变动时，直接删库重建更快；但一旦开始写入测试数据或有真实用户，删库重建就不能再用了——那时花半天把 Alembic 配好，一劳永逸。一个具体信号：从 SQLite 切到 MySQL 的那一天，就是该认真上 Alembic 的时刻，不必提前学，但别把"删库重建"的习惯带进真实数据里）

最终验收标准

不是"数据库里多了一条记录"，而是：

    • 做登录版：加测未登录/错误口令返回 401、越权拿别人数据返回 403 或 404
    • 不做登录版：加测未带访问密钥/未授权请求返回 401 或 403、访问不存在的 ID 返回 404
      （不用多，一个测试文件覆盖这几种情况即可）
    • 自用/局域网内用：HTTPS 可以后置，先跑通再说
    • 公网开放注册/登录：HTTPS 是强制项，跟密码哈希、限流、安全 Cookie（HttpOnly）归到同一档安全底线，不是"最好有"，是上线前必须有

手动验收清单（不写 Vitest，每次改完按这个点一遍）：

节奏参考（不是死线，卡在某周很正常，用来校准进度；按上面各阶段预估时间累加得出）

按每天 2-3 小时：

  • 第 2 周末：阶段三完成——异步请求跑通，axios 调 FastAPI 能拿到 JSON（还没碰 Vue）
  • 第 3 周末：阶段四完成——Vue 里 v-for 渲染出列表
  • 第 3.5-4 周末：阶段五完成——列表页+详情页 Demo，Router 能跳转，共同路径到此结束
  • CRUD 刚通、功能还很少时（约阶段六进行到一半）：做一次"半成品部署演练"——只要求另一台机器能访问列表页、能新增一条数据，并且确认清楚 SQLite 文件/数据目录具体在哪，重启服务后新增的数据还在。这一步是为了让环境变量、构建产物路径、CORS origin、SQLite 文件位置这些坑提前爆炸，爆炸成本最低；最终验收前再正式部署完整版

阶段六开始，两条路分岔（阶段六的工作量本身就不一样，不是到阶段七才分）：

  • 自用/局域网小工具：阶段六不用走 Cookie+CSRF 那套，只做 CRUD+基础校验+可选的固定密钥，更轻，约第 4.5-5 周完成；阶段七走"自用版"分支，第 5-6 周末左右能收尾
  • 公开注册登录版：阶段六要完整跑一遍 JWT+密码哈希+Cookie+CSRF 切换清单，约第 6 周末完成；阶段七还要走多状态码测试、正式部署+HTTPS，大概率要拖到第 7-8 周甚至更久，第一次做别把 8 周当硬指标

学习方式提醒

遇到报错的正确顺序：看状态码 → 看后端日志 → 最小复现 → 查官方文档（Pydantic v2 / SQLAlchemy 2.x async 的具体写法容易和旧版本混淆）→ 再问 AI。

AI 结对编程可以用，但顺序是：先手动跑通 npm run dev 和 uvicorn --reload，看得懂报错 → 卡住时贴报错问 AI → 理解后再继续。不要一开始就让 AI 代理写代码、跑代码——那样容易得到一个"能跑但不知道为什么能跑"的 demo。

git 建议小步提交，关键接口用 curl 或简单测试固化下来，方便后续回溯。