尤大直播探讨Vue优化与开发平衡:Vite与Vue如何以周或月为单位切换

admin 2025-04-25 160 0

在两天前,有一个关于尤大的直播,其中探讨了许多问题:

Vue 的模板能够像 Svelte 那样高效地进行静态编译优化。Facebook 搞的 prepack 基于高度灵活的 JS 已经不再有动作。面试问源码这种行为其实是人为设置的障碍。一个人 Vue 的水平高低与他是否看过源码并没有太大的相关性。LowCode 是在自由度和易用度这两端的线段上尝试不同的点来达到平衡。Serverless 取决于公司的基础设施,而你最多能考虑的是选择哪家的服务。微前端需要根据你们的业务场景来决定。

但其中一个问答对我印象极深:

Q: 如何平衡 Vue 与 Vite 的开发?

A: 以周或者月为单位来进行切换。

这对我带来了极大的启发,连续时间的注意力集中至关重要。

简历用一页纸就能写完,重点十分突出,让人一眼就能看明白,这便是我制作一纸简历的最初想法。首先来看一下一纸简历的完成品。

图标设计

自己做过许多大小不同的网站,然而都存在两个问题,其一就是外观丑陋,其二是没有图标。就像之前做的极客时间返现平台,它既没有标识,样子也很丑。

长得丑是没救了,而没图标这件事还能抢救一下。我花费一天时间,通过 sketch 辛苦地做出了第一个图标。

图标中的外边部分是一张纸的代表,图标下方的 M 是 Markdown 的标志,其寓意是用 Markdown 来编写一张纸的简历。

使用指南

一份简历,你仅需运用基础的 Markdown 语法以及特殊的 FrontMatter 便能生成简历。它具备如下功能:

一份简历,从其名称就可以知道,最终形成的是只有一张纸大小的文档模板主题。有多种不同的模板可供选择,人们可以根据自己的个人风格,选择简约风格或者美观风格的 Markdown 模板。这些模板的语法简单易懂,上手很快,几乎不需要花费时间去学习。而且可以实时渲染成 PDF 格式,能够直接进行预览和下载。

一份简历依据 Markdown 生成了仅有一页纸的 PDF 格式简历。其语法与 Markdown 相同,然而对部分语法存在不支持的情况。一纸简历的主要构成部分分为两大块:

Markdown 中的 frontmatter 可以生成结构化的基础信息,像姓名、手机号、微信等这些个人信息。Markdown 中的正文能够生成非结构化的简历主体内容,例如工作负责的具体事项以及其成果。还有 frontmatter 中的字段释义。

基础信息里的 frontmatter 是以 yaml 形式书写的,以下这些字段都是可选的,要是不填写就不会显示出来。

正文信息

目前支持以下 Markdown 语法:

目前不支持以下 Markdown 语法:

Markdown 扩展语法具备多页简历的功能。

本应用主要会引入一页简历。如果需要多页简历,那就转到另一个使用 Markdown 书写的码途编辑器。

它是一个能够支持多种主题且可导出为 PDF 的 Markdown 编辑器。你能够用 Markdown 来书写多页简历,并且可以利用它导出 PDF。

技术架构

一份简历完全由纯前端来实现,没有服务器端的参与。所以技术的难点存在于浏览器端,那就是怎样把 Markdown 渲染成 PDF,以实现实时预览和直接下载。

实现原理大致如下:从 Markdown 开始,AST 经历各种转换过程,然后在浏览器中生成二进制的 PDF 文档,最后在浏览器中进行展示。

对于业务同学来说,难点并非是怎样从零开始实现,而是怎样在有着一百万的 npm 仓库里找到合适的轮子,因为从零实现既耗费心力又没有必要。而眼下呈现出来的对于此实现最重要的有三个库。

react-markdown 可将 Markdown 渲染为 React Component;react-pdf/renderer 能制作 PDF 文档;react-pdf 可把 PDF 文档通过 SVG/Canvas 的形式在浏览器中进行渲染;此为相关的尝试与反馈。

线上地址: 一纸简历

你若有使用方面的问题或建议,可添加我的微信 shanyue94 来进行反馈和交流。

分享链接:这可能是个很实用的功能,能把简历生成一个有过期时间的 URL,便于投递简历时进行沟通。

对于以上这四个下一步的规划,你更倾向于哪一个呢?欢迎你留言。山月会把时间留给那些最为急迫的需求。