【面试加油】使用 VitePress 打造个人专属的前端知识体系

前言

先祝各位朋友开工大吉，身体健康，诸事如意。我的第一篇文章 TailWindCSS+Vite+Vue3 打造个性化在线简历项目 收藏过百，收到很多正向反馈和建议，很感谢朋友们的支持与鼓励。

当前我正处于求职阶段找工作，依旧是面向面试写作 ... 也祝各位朋友在职场中，一帆风顺。

今天分享一个基于 VitePress 的在线文档项目，它可以帮助你快速搭建属于自己的前端知识体系文档。当然，这个思路还可轻松扩展至业务组件开发、内部文档编写等多个场景。

• github github.com/Fridolph/FE...

• 在线预览 fridolph.github.io/FE-prepare-...

本文不涉及技术性内容，更多是关于学习思路、学习方法以及面试复盘的分享与交流

本文的核心目的是通过构建和完善这一在线文档项目，帮助大家系统化地搭建和巩固前端知识体系，并分享我在学习过程中的方法论及面试复盘经验，以期助力自己及准备找工作的你更高效地找到心仪的工作。

背景

在求职过程中，无论是已离职还是在职状态，我们可能需经历一系列步骤才能最终获得工作机会。以我个人的经历为例：

1. 准备和更新个人简历，确保它充分展示了我的技能和经验。
2. 搜索合适的职位，并根据职位描述（JD）对简历进行针对性调整。
3. 在掘金等社区收藏和整理相关的面试资料，开始系统地学习和准备。
4. 当感觉准备好了，就尝试投递简历，并根据反馈进行简历的微调和优化。
5. 参加线上或线下的面试，与招聘方进行深入交流。
6. 面试结束后，立即进行笔记整理，记录下印象深刻的问题、经验、思考以及启发。
7. 尽量在当天复盘，总结自己的不足之处，弥补知识盲区。
8. 重复上述步骤 1 - 7，直到找到满意的工作。这就是所谓的"面试循环"。

痛点分析

• 简历频繁更新

  可能需要针对不同的岗位要求，去频繁调整简历以匹配不同的 JD，非常耗时。有的岗位注重移动端、小程序，有的公司偏向 Saas 业务，而有的公司可能对某个技术栈（Ng 等）有特殊要求。 若做得有在线简历，可定制化建立不同分支同步 pdf，具体不展开。

• 面试准备

  1. 收集、整理和消化大量面试题，耗时耗精力。掘金收藏夹如果没提前分类好，会很崩溃很耗时
  2. 此过程中可能存在很多重复、类型相近的题目（核心考点相同）
  3. 前人已整理好的在线文档，面经等，可能存在不全面，年代久远（红宝书第三版，jQuery for IE，Node 版本跟不上等等）
  4. 别人的面试总结或者复盘笔记，可参考但不可复制，需结合自身情况

• 面试复盘

  • 自我感觉良好，答的好不一定就是面试官想要的（一般会有提问环节，可根据情况在恰当时间友善地交流一下）
  • 面试完尽量及时笔记（手机备忘录等）和当天复盘（盘点不足，总结可改善的地方）
  • 容易遗忘，若因安排太满来不及消化或者遗忘，这无疑是非常浪费的事

• 知识更新和学习

  面试后补救不足之处需要快速而有效的学习策略。虽然我们的目的是通过面试，在这个越来越卷的大环境下，追溯其本质，也是为了将此过程作为学习素材，以供后续的面试和工作中学习，温故知新，不断学习进步。

• 面试焦虑

  金三银四面经很多，随着面试经验值的积累有可能越面越有自信；当然这个大环境下，也可能越面越怀疑人生。 焦虑其实也源于清醒自我认知。

其实都刷到这了，试想下若自己的知识体系都囊括这些内容，都能答上来，还会焦虑吗 ...... 给自己一点鼓励：能持续关注社区的小伙伴已经领先混子很多了 ...... 题到面时方恨少，事非 hello world 不知难

综上所述，面试过程确实充满挑战和不确定性。

作为求职者，我们往往处于被动地位缺乏明确的反馈和进度指标。因此构建一个系统化的学习和准备流程对于提升求职效率和减轻焦虑感有着很好的帮助。

深刻教训 与 求职反思

以下是我从最近一段时间的经历中提炼出的深刻教训，顺便对每个点做个简单剖析：

1. 简历完善与初筛机会

存在问题：简历内容不全面，导致未能通过初步筛选，错失机会。

分析：在非内部推荐的情况下，HR 是初筛简历的主要人员。为确保简历被目标公司的 HR 看到，应根据具体岗位需求调整和完善简历内容，特别关注岗位要求与个人能力的匹配度和关键词的使用。

例如：好多 JD 都写能运用三大框架之一，但没说明说用哪个的（一般都是 Vue，除非标注 React、Ng）如果有相关经验或者练手项目，都可加上

2. 面试准备与表现

存在问题：面试时紧张、缺乏准备，给面试官留下不佳印象，导致面试失败

分析：面试前应做好充分准备，包括了解公司背景、目前业务，岗位职责等。同时，面试时要保持冷静，积极回答问题，展现出个人素养和应变能力就好（切忌乱扯，会丢大分）

3. 知识掌握与思维局限

存在问题：过度依赖固定知识体系（如 "面经公式"、"八股文" ），导致思维局限，无法深入探讨问题。

分析：面试官往往能识别出应试者是否仅依赖固定套路回答问题。因此，应注重知识的实际运用场景和深度探索，避免仅停留在表面知识点。

4. 技术更新与过时知识

存在问题：掌握的知识可能已过时，如某些插件、API 已更新，但未了解新方案。

分析：在技术领域，持续学习和跟进更新至关重要。例如，了解 Vue2 到 Vue3 的升级变化和优化点，以显示自己的学习能力和适应性。

有场面试，问 new Date() 如何拿到判断闰年，得到年月日，得到时间等等等，扯了一堆还提了 day.js，面试官浅笑着："可以看下 MDN"。 看就看 ... 纳尼!!! new Date() .toLocaleString() .toLocaleDateString() .toLocaleTimeString() 好吧 ... ORZ

说自己关注 ESNext，Promise .any() .allSettled() .withResolvers() 不知道那必然寄了

5. 个人经历 与 软实力展现

存在问题：在面试中未能充分展示自己的经历、性格和优势等软实力。大多出现在 HR、或领导面时，而这很可能成为能否入职的必要条件。

有场面试印象很深，领导者直言不讳指出自己存在的不足：技能、专注点不够，关于行业及自身的复盘和思考等。同时给出很多启发性建议：面试要尽量概括，有逻辑性，减少发散，聚焦问题等等。

茫茫人海，相逢即是缘，很感谢这些经历。不为失败找理由，做好当下，持续学习，不断进步，才能走的更远。

如何去解决面试过程中的难点

针对以上问题，我想到了以下解决思路：

• 1. 简历模板化与自动化

  开发可以自动根据不同职位要求调整的简历模板，我在上一篇文中分享了一个在线简历项目。您可根据自己需要，修改模板，并生成自己的简历。在不同分支下生成不同的模版，或者通过参数化配置，路由、query 等来动态调整不同的在线简历版本

最近在看 Nestjs 但时间很琐碎，看后面能不能前后端弄一套完整的demo了

• 2. 面试题、知识点，各类资料整理：

  • 构建或关注一个标准化的面试准备资源库，我自己也是从掘金面试小册，大前端 - 前端高级进阶 等在线文档中得到启发

  • 我创建了个人的 FE-prepare-interview 前端知识宝典，通过在线文档的方式，快速整理和整理自己的前端知识，聚焦于面试，减少搜索和筛选时间。

  • 半路发现 - - 这个更好用，推荐一下 github.com/haizlin/fe-... 当然本项目思路还是有一定参考价值，可以根据自己情况来对应整理

• 3. 面试复盘：

  焦点化快速整合信息：根据面试反馈，快速定位学习资源来补充知识盲区，在上面知识库的基础上，对欠缺部分查缺补漏，在完善直击概念模块，通过提炼要点补充面试官问题，对必要之处通过编写代码模块，进行进一轮巩固，以此形成自己的知识体系。

解决方案之 FE-prepare-interview

• github FE-prepare-interview
• 在线预览

为了解决面试循环中的各种问题，我基于 VitePress 创建了该项目。 使用 VitePress 在线文档相对于社区文章有以下优点：

• 随时更新，更易纠错

  相比于传统文章或博客，在线文档更容易进行更新和纠错，保持内容的时效性和准确性

• Vue 集成度高

  VitePress 与 Vue 的高度集成允许在 Markdown 中直接编写 Vue 组件，便于创建代码演示和交互式示例。

• 复用性高，可维护性好，不重复造轮子

  可以把收藏夹里的每一篇文章当做一个组件，面试题 A、面试题 ... Z，产生了太多公共引用，通过知识点的划分，目录结构的组织，和相关内容的整理，我们得到了自己的前端知识体系，方便以后的查阅和维护，当然，这需要我们花点时间去整理和整理，但是，这是一笔值得花时间的财富。

• 完整知识链路形成

  从问题出发，到代码实现，再回归概念本身进行温故知新，形成完整的知识链路，加深理解和记忆。

项目介绍 / 学习一个新知识的过程

• 概念明确：首先了解新知识的定义和核心概念，确立理解的起点。
• 背景考察：探究该知识产生的背景和发展历程，有助于理解其重要性和应用场景。
• 问题解决：分析该知识主要解决了哪些问题，以及在实际应用中的价值。
• 实践操作：通过简单的实例或 "Hello World" 级别的代码实践，加深对新知识的直观认识。

若要进行深度学习，还可考虑以下方面：

• 原理探究：深入挖掘知识背后的工作原理，理解其为何能够有效解决问题。
• 横向对比：寻找并比较其他可能的解决方案，分析优劣，拓宽视野。
• 思维发散：可进行跨学科、跨领域的思考，获得不同启发。

本项目能解决什么 / 如何运用

项目特别适用于面试准备，在前端面试中经常遇到的一个问题是：

从浏览器输入URL到页面渲染发生了什么？

fridolph.github.io/FE-prepare-...

通过思维导图记忆

为了高效准备面试，我们可以将答案整理成思维导图的形式。这种方式不仅有助于记忆关键点，还能在面试时作为自我检测的提示工具。通过思维导图的折叠功能，我们可以保持答案的简洁性，同时确保在需要时能够迅速展开并深入讨论每个关键点。

这样不至于失去重点，当面试官想继续考察我们掌握的深度，能根据这些关键词，继续发散和扩充下去。

面试导向

本项目的【面试官问】模块专注于提供精炼、概括性的答案，以适应面试的口述环境。例如，对于上述的浏览器渲染问题，我们会提供一份简洁明了的回答大纲，并通过思维导图等形式进行引导和提示。

注：答案搜集于互联网，基于个人理解，仅供参考不保证正确。可根据自己的理解和需求来补充和完善答案。

深入理解

当然，对于每个关键点，我们都可以进行更深入的讨论和学习。为了帮助用户达到这种深度理解，我们在文档中添加了【直击概念】模块。在这里，我们可以追本溯源，深入理解每个关键点的原理和背景。通过这种方式，我们可以将各个知识点关联起来，形成一个完整、系统的知识体系。

fridolph.github.io/FE-prepare-...

真的要从原理，从浏览器、网络，解析等，一步步去理解，把各个知识点关联起来，才能真正理解和掌握这个知识点。

如何使用该项目辅助面试

本项目包含多个版块，旨在为用户提供全面的学习支持和面试准备。当然，项目永久开源，你可直行参考改成自己的知识体系，包括但不限于：面试题、学习笔记、项目实战等。

以下是各版块的简要说明：

• 【网友面经】

最近招聘季，面经真的多啊，收藏停不下来。可根据自己的情况对应整理 - - 好多都囊括在知识点里了，加上时间琐碎，没整理太多。小伙伴可根据自己情况整理

• 【准备简历】

✅ 提供本人上一篇那个在线简历模版 github.com/Fridolph/my...

❎ TODO 简历相关参考 这篇文章算吗 = =

• 【直击概念】

专注于概念类知识的学习和理解，包括明确概念、了解背景和解决途径等方面。

• 【面试官问】

提供面试常见问题的精炼答案和思维导图助记工具，帮助用户高效准备面试。

• 【编写代码】

包含算法、手写题和代码题等实践内容，帮助用户提升编程能力和解决实际问题的能力。

面试需要我们抓住问题本质，提炼关键点，围绕主题来进行回答。

【面试官问】这个版块基本满足需求，对要进行扩展（基础或延伸）的部分就放到了【直击概念】这个模块中，为了方便记忆和对代码的部分作区分，添加了【编写代码】这个模块，以此形成一个知识链路。

版权声明

文档中大部分内容均参考搜集整理自互联网，部分内容笔者会根据个人理解做些修改。

掘金、公众号等都标明了来源出处和作者 ；若无意中侵犯了您的权益，请及时联系我，会在第一时间进行 删除 或 更改。

请注意，本文档内容仅供参考，不保证其绝对准确性。创作内容遵循 CC BY-NC-ND 4.0 协议，项目代码则遵循 GPL 开源协议进行分享和使用

源于社区，回馈社区

该项目还有个目的，就是引导大家多关注问题本质，本项目仅为通过面试，整理自官方文档，MDN 和优秀博文等。

鼓励大家直接查阅官方文档以获取更深入的理解。同时，笔者在整理 MDN 性能优化章节时，也积极参与了部分章节的翻译工作，希望通过这种方式为开源社区贡献一份微薄之力。

总结

最近转战 github.com/haizlin/fe-... 发现效果非常好，可以替代面试官问这个版块了。这个算是个人玩具，毕竟花了些时间，弃用挺可惜，作为个人复盘思路也不错，想着还是写篇博客分享分享了。

本文项目：FE-prepare-interview

• github github.com/Fridolph/FE...
• 在线预览 fridolph.github.io/FE-prepare-...
• 文章提到的简历项目为：my-resume
• 若感兴趣可浏览我的另一篇文章 新年福利!TailWindCSS+Vite+Vue3 打造个性化在线简历项目

本人没啥开源经历，就是玩。欢迎参与一起玩 ~

最后吐吐槽

30 以后很多事真的身不由己，特别是家庭上，成家后事情太多太碎，方方面面的事非常消耗精力，能看1小时以上的电影都是种奢侈了。而父母年纪也大了，特别是今年过年，母亲生病住院很受打击，各种压力扑面而来简直喘不过气来。

没法，那就平衡好工作和家庭吧，游戏可以不打，兴趣投入可以减少，还是得投入时间学习，不然马上被社会被淘汰了。钱可以少挣，尽量找个有双休，没有加班文化的公司吧，平时辛苦些，周末尽量都留给家人。

之前掘金加了个小群，里面很多应届和刚毕业1、2年的小伙伴，真的很有朝气，会进行各种面试复盘、讨论，可支配时间多学东西自然就快，也能理解大厂为什么都喜欢招应届和2年左右的可塑之才了。

之前有面试官就提到一个严重问题：实际经验和掌握技能不匹配，诶，没法，从现在开始努力调整吧。我这样的估计是大多数人的现状 = = 中小企业，技术沉淀不够大厂无望，混到公司倒闭，在这区间跳槽。作为过来人给点建议：

• 一定要在职业生涯初期多学习，多积累，多总结（技术博客等）
• 同上，持续学习贯穿始终（就像修仙小说里那样，落后一步，以后连主角背景都追不上了）
• 要对所在行业有所了解，在此基础上再对业务、产品有所了解（面到这块长教训了 T_T）
• 培养一（多）项技术特长 ，有兴趣的方向持续深耕

伪全栈式hello world中级还凑合，面高级真一碰就碎 ORZ 全都是泡沫 ~~~

躺也躺过了，也给自己敲了警钟。凡事往好了想，这也是个契机和转折。在展望未来的同时，我也保持着脚踏实地的态度，每一小步伐都是向着目标迈进的重要一步。

最后一点就是坚持吧。也是给自己说的，既然决定就抽出时间持续写作。

过去的就让它过去吧，躺平的时光很快乐，也导致了现在的囧境。那就重新开始 ~

祝各位龙年大吉，新的一年身体健康，生活愉快！ 兄弟们加油，金三银四冲了，也祝大家找到满意的工作！