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

最新推荐文章于 2024-07-08 09:37:39 发布

IT派同学

最新推荐文章于 2024-07-08 09:37:39 发布

阅读量1k

点赞数 123

文章标签： Vue 开源简历 GitHub

本文链接：https://blog.csdn.net/gaowumao/article/details/131623743

版权

派大星开源了一个名为《艺简》的项目，这是一个纯前端的在线简历制作平台，支持Markdown语法、自定义布局、主题颜色和模块管理。用户可以预览、编辑并导出为PDF。项目基于Vue3、Vue-Router、Vuex和AntDesignUI构建，并使用Html2PDF.js进行PDF导出。

摘要由CSDN通过智能技术生成

🏡 博客首页：派大星

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

🎢 本文由派大星原创编撰

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

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

🔗 作品：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属性，从而来保证其唯一性。