为了不花钱，自己写了一个在线简历制作平台

🏡 博客首页：派 大 星

⛳️ 欢迎关注 🐳 点赞 🎒 收藏 ✏️ 留言

🎢 本文由派大星原创编撰

🚧 系列专栏：《开源专栏》

🎈 本系列主要输出作者自创的开源项目

🔗 作品：https://resume-online-uzbs.vercel.app/#/resume

---

前言

       大家好，我是派大星，从入职到现在一直处于高强度的工作中，一直没有时间更新文章，其余的时间也都在学习新的知识以及在做自己准备开源的项目，所以对于文章的编写实在挤不出时间了，这段时间的收获还是颇多的，其一是自己参与的一次大型迭代按时成功上线，其次是在闲余时间开发了两个开源项目，准备分享给大家，这篇文章就是介绍其中一个纯前端的开源项目，可以提供给学习前端的小伙伴们参考，以及如果可以的话，大家也可以向仓库提交PR一起维护，好了，话不多少，下面介绍本次文章的主角，我给它取名《艺简》，不知道大家从名字中是否可以看出这是用来做什么，如果不能，那么就随我往下看看吧。

创作背景

       在找工作的时候，作为应聘者的我们，需要准备一份充分的简历来向企业介绍我们的基本信息，但是简历制作往往不是我们想的那么简单，做制作简历的时候，我们还需要考虑简历的格式以及简历的样式、排版等等问题，如果使用Word文档进行制作，只是内容的排版就可以将我们“逼疯”，但是现在网上制作简历的平台又有很多，不过往往都是需要进行付费之后，才可以将自己费心费力做好的简历下载下来，而像我这个定力十足的“白嫖怪”，怎么会容忍自己为了这些去付费呢 [狗头保护] 。

       所以，在下班时间我就开始琢磨这个问题，如何去制作一个这种在线编辑简历的平台，这个平台不仅要满足大家对排版格式的要求，还要简单易用，而且不同的用户对于内容区域的布局位置往往会有不同的想法，比如，我想把我的教育经历放到第二板块，我想把相关技能板块往后放置，这都是问题，如何实现位置的自定义？经过一段时间的思索以及开发，终于在今天将其上线了！！！🚀🚀

开源地址：https://github.com/pdxjie/resume-online 还希望路过的小伙伴奖励作者一个star🌠

项目简介

       《艺简》是一个免费在线制作简历的平台，它不仅支持自定义内容区域的布局位置、支持自定义简历主题颜色、自定义模块标题以及增加/隐藏模块以及子模块等，除此之外，它还支持Markdown语法进行编写，无需关心内容格式如何排版的问题，即可在线预览、编辑、生成，即所见即所得。
在这里插入图片描述

技术选型

       本次选择开源的项目是一个纯前端的项目，也是把之前学习的Vue3的相关语法重新捡起来，不得不说，Vue3用起来是真的香，代码写起来那是相当的丝滑。如果有小伙伴是刚学习Vue3的话，可以看一下这个项目，代码实现逻辑还是挺简单的。下面主要介绍一下本次使用到的相关技术。

• Vue3.0
• Vue-Router4.0
• Vuex4.0
• AntDesignUI 3.x 组件库
• Marked
• Html2PDF.js
• Vue-pick-colors
• Vditor
• hevue-img-preview
• UUID

       下面介绍一下使用的这些技术主要是用来实现什么功能，以下介绍的技术都是按照实现流程进行介绍。其中前四种技术就不需要多说了，Vue全家桶以及UI组件库，使用现有的UI组件库可以快速的帮助我们搭建网站。 Vditor 是支持Vue3的Markdown组件，在项目中我们编写的主体内容都是使用的Markdown语法，来帮助使用者实现内容的快速布局以及排版。 Marked 的主要作用是将我们编写的Markdown内容转化为HTML内容；Html2PDF.js 这个JS库主要是用来将我们搭配使用前两种技术所转化成的HTML内容导出为PDF文件，也就是我们最终的结果。其余使用到的技术都是一些辅助性工具，如果大家有实现这些技术所实现的某种功能的话，派还是强烈推荐的。因为真的很好用。Vue-pick-colors 是一个颜色选择器，非常的美观好用，并且使用起来也是很简单。hevue-img-preview 这个插件，我想大家看名字就可以看出它是用来实现什么功能的，图片预览功能，这个组件是一个GitHub作者开源的一款工具，使用非常方便，支持单张或多张图片的预览效果。UUID 使用UUID主要是我们编写内容时可能会涉及到非常多的内容模块，为了保证唯一性，我使用了UUID为每一个模块都生成了一个ID属性，从而来保证其唯一性。

功能特点

• 支持Markdown语法，在线编写简历内容、简历内容实时预览，即所写即所得
• 支持自定义简历主题颜色
• 支持自定义模板标题名称
• 支持增加/隐藏/移除 模块以及子模块内容在简历中的显示
• 支持模块以及子模块内容的上下移动
• 支持多模板选择（不过由于时间原因，目前只实现了一个模板，后续会继续迭代补充）
• 在线生成PDF文件

页面展示

主体首页

更改简历主题颜色

多模板选择

导出简历自定义名称

总结

       以上就是本次开源项目《艺简》的相关内容的简单介绍，如果各位小伙伴想要了解这个项目的全部内容以及想要进行实际操作的话，可以前往本人GitHub仓库自行Clone到本地进行运行查看或者在线上地址进行相关操作。

地址传送门

• 线上地址：https://resume-online-uzbs.vercel.app/#/resume
• GitHub仓库地址：https://github.com/pdxjie/resume-online

如果感兴趣的小伙伴还希望可以到Github仓库给作者点个star⭐ 作为支持，同时也欢迎大家提交PR来共同维护。