[特殊字符] 把 Vue 写进简历：一个野生前端の血泪成长史 | 7000 字长文慎点

优质文章学习记录

05 Apr 2026 — 7 min read

温馨提示：本文 7k 字，阅读约需 15 min。
建议收藏＋点赞＋投币三连，下次不迷路。

00. 开场白：我，非科班，被 Vue 拯救

三年前，我还是一个拿着 4k 工资的运维小弟，每天三件事：

重启服务器
背锅
在电梯里假装看不见老板

命运的转折发生在 2022 年 6 月 18 日 —— 那天晚上，我蹲厕所刷 B 站，刷到了「Vue3 组合式 API 丝滑入门」。
up 主一句「写网页像搭积木」直接把我钓成翘嘴。
2h 后，我冲完凉水澡，决定转行。
（对，就是冲动，但冲动是青春的柴油发动机。）

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

代码量瞬间砍半，当晚发了个朋友圈：「Suspense 是上帝打字的痕迹」。

③ 第一次把网站发到手机

vite --host 后局域网地址丢给女朋友，她打开后惊呼「这是你做的？！」
那一刻，我知道我行了。

03. 项目纪实：0 到 1 搭一个企业官网

（源码已开源 → github.com/xiaobei/vue-official-site）

3.1 需求拆解 —— 产品经理竟是我自己

表格

复制

页面	功能	技术点
首页	Banner + 产品列表	轮播封装 + 懒加载
新闻	分页 + 富文本	markRaw 渲染外链文章
关于	高德地图 + 表单	异步组件 + 验证码
管理	登录 + 增删改	路由守卫 + Pinia 持久化

3.2 技术选型 —— 拒绝「 KPI 堆砌」

Vue3 + Vite（快就是生产力）
Pinia（干掉 Vuex，语法糖真香）
Element Plus（省 UI 时间，早点下班）
UnoCSS（原子化，样式随写随用）
Vitest + Cypress（单测 + E2E，简历亮点）

3.3 架构手绘 —— 字丑但直观

复制

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

3.4 代码片段 —— 直接抄作业

① useScrollReveal —— 滚动出场动画

TypeScript

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

vue

② 路由自动注册 —— 再也不用 `import.meta.glob`

TypeScript

新增页面 → 新建文件 → 写完收工，零配置。

③ 性能组合拳 —— 首页秒开

表格

复制

优化点	操作	收益
图片	动态 `srcset` + webp	体积 ↓ 65%
组件	路由懒加载	首屏 JS ↓ 38%
请求	接口聚合 + HTTP2	握手 ↓ 50%
缓存	Swr 策略	二次进入 0 请求

最终指标：
LCP 1.8 s / FID 80 ms / CLS 0.04
（百度统计，3G 网络，跑分那天我比双 11 还紧张）

04. 踩坑合集：血与泪的 FAQ

表格

复制

症状	根因	一剂见效
修改数组，页面不变	直接通过索引赋值	`arr.splice()` 或 `Vue.set()`
路由刷新 404	GitHub Pages 单页陷阱	`404.html` 重定向脚本
Pinia 数据一刷新没	只在内存里	`pinia-plugin-persistedstate` 安排
TS 识别 `.vue` 报错	没声明模块	`env.d.ts` 加 `declare module '*.vue'`
打包体积 8 M	整包引入 ECharts	按需 `import * as echarts from 'echarts/core'`

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

写完功能只是 60 分，让用户爽到才是 100 分。分享 3 个「 UX 微动作」：

按钮反馈
:active 缩放 0.98 + 波纹动画，点起来像机械键盘。
骨架屏
首屏数据回来前，灰色块先占位，用户感知加载 ↓ 30%。
错误文案
把「网络错误」换成「网络开小差，正在重连 ▓▓▓▓▓ 80%」——用户容忍度瞬间 + 50。

06. 学习心法：2 个真理 + 1 个玄学

① 真理：项目驱动

不面向面试的学习都是自嗨。
每学一个知识点，立刻写进项目，让代码长在真实土壤里。

② 真理：教是最好的学

把踩坑过程写成博客 / 录成视频，观众的问题会逼你更深入。
我坚持「输出 1:1 输入」——学 2h，写 2h 笔记，半年涨粉 5k，简历直接贴二维码。

③ 玄学：黎明前最黑

遇到卡 3 天以上的 bug，去跑步、冲澡、睡觉。大脑后台进程会在你放松时给出答案。
别问，问就是量子力学。

07. 未来展望：下一步，全栈 or 底层？

表格

复制

方向	动机	计划
全栈	想做完整产品	Nuxt3 + NestJS + Postgres 复盘「Notion -lite」
底层	想读懂 Vue 源码	先啃《Vue.js 设计与实现》，再跟 evan you 的直播
副业	想逃离 35 岁	用 Vue + Taro 做微信小程序，卖家乡农产品

08. 彩蛋：资料空投

后台回复【Vue】自动领取：

高清思维导图（PDF）
本文官网源码（MIT 协议，可商用）
最新前端面试题库（含 Vue 源码手撕）

地址：公众号「前端小北」→ 菜单「资源」→ 回复「Vue」即可。
声明：全程 0 付费，只希望你点个赞。

09. 结语：愿你保持热爱，奔赴下一场山海

写这篇文章时，耳机里循环《追梦赤子心》。
从 4k 运维到 18k 前端，Vue 是我人生的一块跳板，但绝不是终点。

如果你正在自学，却怀疑「到底能不能行」——
把这篇收藏，每天看一遍，然后关上手机去敲代码。
三个月后，你会感谢那个没有放弃的自己。

我们山顶见。

—— 小北于 2026-01-10 凌晨 1:23

本文由「小北」原创，首发 ZEEKLOG，可转载但须注明出处。
评论区已开，欢迎打卡、提问、互粉，一起卷成更好的自己！

【AIGC】冷启动数据与多阶段训练在 DeepSeek 中的作用

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]本文专栏: AIGC |ChatGPT 文章目录 * 💯前言 * 💯冷启动数据的作用 * 冷启动数据设计 * 💯多阶段训练的作用 * 阶段 1：冷启动微调 * 阶段 2：推理导向强化学习（RL） * 阶段 3：拒绝采样与监督微调（SFT） * 阶段 4：多场景强化学习 * 💯代码示例：冷启动数据与多阶段训练的实现 * 1. 冷启动微调阶段 * 作用与应用： * 2. 推理导向的强化学习阶段 * 作用与应用： * 3. 拒绝采样与监督微调阶段 * 作用与应用： * 4. 多场景强化学习 * 作用与应用： * 总体流程 * DeepSeek 中的应用 * 💯总结 💯前言在人工智能领域，深度学习模型的训练和优化往往需要大量的标注数据和计算资源。然而，面对复杂任务时，即使是最先进的技术和大量的训练数据也未必能够保证模型的最优表现。DeepSeek

ClawdBot实际作品：语音会议录音→Whisper转写→重点内容摘要翻译

ClawdBot实际作品：语音会议录音→Whisper转写→重点内容摘要翻译你有没有过这样的经历：开完一场两小时的跨国语音会议，满脑子都是“刚才对方到底说了什么关键条款？”、“那个技术参数我记全了吗？”、“下一步行动项谁负责？什么时候交付？”——而会议录音还静静躺在手机里，没人去碰。 ClawdBot 就是为这类真实场景而生的。它不是另一个云端SaaS工具，也不是需要注册、付费、等审核的黑盒服务。它是一套你可以完全掌控在自己设备上的本地化AI工作流：从原始语音输入，到精准文字还原，再到多语言要点提炼，全程离线、低延迟、可审计、零数据外泄。这篇文章不讲抽象架构，不堆参数指标，只展示一个完整闭环的实际作品——用 ClawdBot + MoltBot 组合，把一段3分42秒的英文技术会议录音，自动转成中文摘要，并同步生成英文要点回顾。整个过程在一台普通笔记本上完成，无需GPU，不调用任何外部API，所有模型都在本地运行。我们不演示“理论上能做”，而是带你走一遍真实操作路径：录音怎么进、Whisper怎么跑、摘要怎么生成、翻译怎么落地、结果怎么验证。每一步都有命令、

llama-cpp-python完整安装指南：5步解决90%新手问题 [特殊字符]

llama-cpp-python完整安装指南：5步解决90%新手问题 🎯 【免费下载链接】llama-cpp-pythonPython bindings for llama.cpp 项目地址: https://gitcode.com/gh_mirrors/ll/llama-cpp-python llama-cpp-python是专为llama.cpp库设计的Python绑定项目，为开发者提供了在Python环境中高效运行本地大语言模型的完美解决方案。通过该项目，您可以轻松实现文本生成、对话交互、多模态推理等AI功能，无需依赖云端API即可享受强大的本地AI推理能力。 🔧 一键编译配置技巧环境配置是新手最容易遇到问题的环节。llama-cpp-python支持多种硬件加速后端，正确配置编译环境至关重要。步骤1：基础环境检查确保系统已安装Python 3.8+和C编译器： * Linux/Mac: gcc或clang * Windows: Visual Studio或MinGW * MacOS: Xcode命令行工具步骤2：核心安装命令 pip in

【2024最全Seedance 2.0解析】：基于17篇顶会论文+3家AIGC大厂内部技术文档的架构逆向推演

第一章：Seedance 2.0 双分支扩散变换器架构解析 Seedance 2.0 是面向高保真视频生成任务设计的新型双分支扩散变换器（Dual-Branch Diffusion Transformer），其核心创新在于解耦时空建模路径：一条分支专注帧内空间语义重建，另一条分支显式建模跨帧时序动态。该架构摒弃了传统单流Transformer对时空维度的粗粒度联合编码，转而通过协同门控机制实现分支间细粒度特征对齐。双分支协同机制空间分支采用分层ViT结构，以16×16 patch嵌入输入，逐级下采样并保留局部细节；时间分支则将同一空间位置在多帧中的token沿时间轴堆叠，经轻量级时序注意力模块处理。两分支输出通过Cross-Gating Fusion（CGF）模块融合，其门控权重由共享的上下文感知投影器动态生成。关键组件实现 class CrossGatingFusion(nn.Module): def __init__(self, dim): super().__init__() self.proj_s = nn.Linear(dim, dim) # 空间分支门控投影