第 4 步 · 前端界面 · 10-14 天
Vue 3 快速使用与实战
使用 Vue 3 和 Vite 实现页面、组件、表单、路由与 API 调用，并生成可部署的静态资源。
Vue 3 官方教程组件、响应式与组合式 API 的交互式教程。访问官方资料 ↗本阶段思路
学到刚好能推动网站进入下一步
先知道它位于哪里
明确当前技术在网站中的职责，以及它与上一步、下一步怎样连接。
所有练习进入同一项目
不做无关的小例子，直接完善正在搭建的网站。
达到交付标准再继续
以可运行、可检查的结果判断是否完成，而不是以看完多少教程判断。
详细学习思路
Vue 3 的 3 个实战阶段
先完成常用操作，再连接真实网站，最后按检查清单交付本阶段成果。
01快速入门 · 3-4 天创建项目与掌握组件基础能用组件和响应式状态完成可交互页面。
需要学习
- Vite 项目、单文件组件和开发服务器
- ref、computed、事件与表单绑定
- props、emit 和组件拆分
动手练习
- 创建文章列表页面
- 实现新增文章表单
- 拆分导航、列表和表单组件
进入下一步前
- 能解释状态放在哪个组件
- 列表有稳定 key
- 表单可用键盘完成操作
官方资料与延伸阅读
Vue 快速上手创建 Vite + Vue 项目。打开 ↗02网站交互 · 4-6 天路由、API 与完整页面状态把 Vue 界面连接到 Go API，并处理真实请求状态。
需要学习
- Vue Router 与页面结构
- fetch、环境变量和 API 封装
- 加载、错误、空数据和提交反馈
动手练习
- 完成文章列表和详情路由
- 调用 Go API 增删内容
- 处理 404、网络失败和重复提交
进入下一步前
- 刷新详情页仍能访问
- 错误有明确恢复操作
- API 地址不硬编码在组件中
官方资料与延伸阅读
Vue Router官方路由使用指南。打开 ↗Vue 最佳实践生产部署注意事项。打开 ↗03阶段交付 · 3-4 天响应式、质量检查与生产构建生成可以交给 Nginx 托管的稳定静态资源。
需要学习
- 移动端布局、语义 HTML 和可访问性
- 类型检查、基础组件测试和错误检查
- npm run build、dist 与生产环境变量
动手练习
- 检查 390px 和桌面布局
- 验证键盘焦点和表单标签
- 生成 dist 并本地预览
进入下一步前
- 页面没有横向滚动
- 构建和类型检查通过
- 直接访问路由有部署方案