Vue 3 前端开发实战与成长经验总结

3.2 技术选型

• Vue3 + Vite（快就是生产力）
• Pinia（语法糖真香）
• Element Plus（省 UI 时间）
• UnoCSS（原子化样式）
• Vitest + Cypress（单测 + E2E）

3.3 架构设计

src ├─ api // 接口聚合（按模块）
    ├─ components // 通用业务组件
    ├─ composables // 组合式函数（useXXX）
    ├─ stores // Pinia 模块
    ├─ modules // 自动注册路由
    └─ utils // 工具函数

3.4 代码片段

① useScrollReveal —— 滚动出场动画

TypeScript

页面任何元素想「滑」进来，只需一行调用。

② 路由自动注册

TypeScript

新增页面 → 新建文件 → 零配置。

③ 性能组合拳

最终指标： LCP 1.8 s / FID 80 ms / CLS 0.04

04. 踩坑合集：FAQ

05. 思维升级：从「写代码」到「做产品」

1. 按钮反馈 :active 缩放 0.98 + 波纹动画。
2. 骨架屏 首屏数据回来前占位，用户感知加载 ↓ 30%。
3. 错误文案 将「网络错误」换成更友好的提示，提升容忍度。

06. 学习心法

① 真理：项目驱动

不面向实战的学习都是自嗨。每学一个知识点，立刻写进项目。

② 真理：教是最好的学

把踩坑过程写成博客，输出倒逼输入。

③ 玄学：遇到问题先休息

遇到卡 3 天以上的 bug，去跑步、冲澡、睡觉。大脑后台进程会在放松时给出答案。

07. 未来展望