00. 开场白
本文分享从运维转行前端的 Vue 3 学习路径,涵盖技术选型、项目实战及性能优化方案。
01. 学习路线:四阶段
| 阶段 | 目标 | 周期 | 关键词 | 踩坑提示 |
|---|---|---|---|---|
| ① 破冰 | 能跑起来就行 | 1 周 | CDN、插值、事件 | 别纠结工程化,先让「Hello Vue」出现在屏幕上 |
| ② 筑基 | 单文件组件 + 路由 | 3 周 | Vite、SFC、Router | 碰到「路由 404」先去检查 history 模式 |
| ③ 提气 | 状态管理 + Ts | 4 周 | Pinia、TS、Axios | 别急着写 'any',否则 TS 会沦为 'JS wearing a tie' |
| ④ 实战 | 上线一个能扫码访问的网站 | 6 周 | 性能、SEO、CI/CD | 域名备案比写代码难,提前 20 天动手 |
02. 记忆锚点:3 个关键瞬间
① 第一次 v-model 双向绑定
HTML

输入框修改后页面自动变化,体验响应式魔法。
② 第一次用 <suspense>
以前发请求时写 v-if="loading" 写到吐,直到遇见它:
vue

代码量瞬间砍半。
③ 第一次把网站发到手机
vite --host 后局域网地址分享给他人,确认部署成功。
03. 项目纪实:0 到 1 搭企业官网
(源码已开源)
3.1 需求拆解
| 页面 | 功能 | 技术点 |
|---|---|---|
| 首页 | Banner + 产品列表 | 轮播封装 + 懒加载 |
| 新闻 | 分页 + 富文本 | markRaw 渲染外链文章 |
| 关于 | 高德地图 + 表单 | 异步组件 + 验证码 |
| 管理 |




