开源啦！一款基于Vue3 + Vite + TS的简历制作神器~~

开源地址

欢迎大家提 issues 和点赞（star）支持！

前言

目前市面上有不少在线制作简历的网站，不得不说，有些做得很好，提供的简历模板非常的漂亮！但是，相信有很多小伙伴不会去使用它们，毕竟贫穷会限制我们！

当然，有些小伙伴可能会去下载各种各样的简历模板，比如一些word格式的模板，但是这些模板还是存在一个问题，就是样式太难调了，扩展性不高。

因为，我作为众多小伙伴中的一员，就想充分发挥自己程序员的能力，于是便有了这款免费的开源简历制作神器！

1.项目技术栈

本项目目前是一个纯前端项目，因为目前的一些功能只需要前端就足够完成了，再加上我自己也是一名前端工程师，所以就先只用前端技术编写。

项目涉及到的技术：

• Vue3：组合式语法，<script setup>语法糖
• Vite：与Vue3最为搭配的打包工具
• Typescript：TS语法
• Pinia：Vue3的状态管理
• Element-plus：基于Vue3的UI组件库
• less：CSS预编译处理
• …

上面几点是项目中用到的一些主要技术，当然还有很多其它技术，需要在项目中自己去挖掘。

2.项目界面预览

目前没有购买服务器，所以项目还是通过github和gitee静态部署的。

2.1 项目预览地址

• gitee的部署：化简
• github部署：化简

上面两个是项目部署好到的生产地址，大家根据自己的网络环境选择即可，项目是没有任何区别的。

2.2 项目预览页面

首页：

模板一设计页：

模板二设计页：

模板一简历效果：

模板二简历效果：

3.项目实现功能

目前项目的版本还处于不太稳定的阶段，也就是测试阶段，所以功能不是特别多，但是制作一份不错的简历是完全足够了，以下是已经实现的功能列表：

• 首页+动画
• 简历模板提供
• 动态增删简历模块
• 自定义模板中字体样式
• 自定义调整模块间距
• 保存草稿功能
• 导出为PDF功能
• 重置
• 自定义头像
• 简历模块列表拖拽排序
• 导出JSON数据
• 主题样式设置
• …

以上是项目主要功能，通过以上功能已经能够做出一份不错到的简历了。

后续还会增加更多的功能，以丰富项目！

4.项目目录结构介绍

由于目前项目还处在快速迭代中，所以项目目录可能还不太稳定，但是主要目录是不会变的，目前主要目录如下：

├─ doc			  // 项目相关文档
├─ public         // 公共资源目录
├─ scripts
├─ src
│  ├─ service         // 请求封装，暂时未用到
│  ├─ assets      // 资源文件存放目录
│  ├─ components  // 公共组件存放路径
│  ├─ router      // 项目路由配置
│  ├─ schema      // 简历模板JSON格式定义
|  ├─ store       // 状态管理文件夹
|  ├─ styles      // 一些样式文件
|  ├─ hooks       // 一些hooks定义
|  ├─ template    // 简历模板文件
|  ├─ interface       // ts类型定义文件
|  ├─ utils       // 工具函数
|  ├─ views       // 页面文件
|  └─ App.vue     // 主入口页面
|  └─ env.d.ts    // ts类型声明文件
|  └─ main.ts     // 项目主入口文件

目录结构就是一个标准的Vue3项目结构，上面列出的是主要目录，更加详细的文件大家可以参考以下截图：

5.简历JSON数据解释

目前项目设计的是所有简历共用的是一套JSON数据，以下是定义的完成简历的JSON数据接口，代码如下：

interface IResumeJson {
  ID: string; // 模板id
  NAME: string; // 模板名
  TITLE: string; // 模板名称
  THEME_COLOR: string; // 主题色
  TITLE_COLOR: string; // 模块标题颜色
  TITLE_FONT_SIZE: string; // 模块标题字体大小
  MODEL_MARGIN_TOP: string;
  MODEL_MARGIN_BOTTOM: string;
  LIST: [
    IRESUMETITLE, // 简历标题模块
    IBASEINFO,    // 基础资料模块
    IJOBINTENTION, // 求职意向模块
    IEDUBACKGROUND, // 教育背景
    ISKILLSPECIALTIES, // 技能特长模块
    ICAMPUSEXPERIENCE, // 校园经历模块
    IINTERNSHIPEXPERIENCE, // 实习经历模块
    IWORKEXPERIENCE, // 工作经验模块
    IPROJECTEXPERIENCE, // 项目经验模块
    IAWARDS, // 荣誉奖项模块
    IHOBBIES, // 兴趣爱好模块
    ISELFEVALUATION, // 自我评价模块
    IWORKSDISPLAY // 作品展示模块
  ];
}

这里需要注意的是JSON数据中的LIST字段，由于我们的简历模块需要有顺序牌力、方便增删复制等等，所以我们目前采用的是一个列表的形式，后续有更好的方式可能会更改。

更加详细的JSON数据格式大家可查看schema目录，如下所示：

6.简历设计页逻辑

为了方便小伙伴迅速上手该项目，我说一下设计页的总体思路：

1. 用户选择首页模板跳转至设计页面
2. 设计页面判断是否有本地缓存数据
3. 有缓存数据则将store中到的简历数据赋值为本地数据
4. 没有缓存数据则将store中的简历数据赋值为我们定义的JSON数据
5. 循环JSON中的LIST，遍历出每个模块，前提是每个模块组件已经提前注册好了

整体思路如上，深入理解还是需要大家看代码。

7.项目安装与使用

大家可以将项目fork到自己本地进行学习或者开发，项目地址如下：

• gitee：化简
• github：化简

运行项目：

由于目前项目还在快速开发阶段，所以没有区分各种环境和规范等等，所以运行命令很简单，执行以下命令即可：

npm install
npm run dev

8.问题反馈

如果大家遇到问题或者Bug，非常欢迎大家多提issue，当然，最好是在github上面提。我也非常希望大家能提提新需求，因为有一些点可能我想不到。

issue地址：issue

9.代码贡献&寻求合作小伙伴

一个人的力量始终是微薄的，所以项目可能不是特别的完善，所以如果欢迎大家贡献代码！

如果你是以下小伙伴，欢迎加入：

• 希望简历上有开源作品的
• 熟练使用Vue3的
• 有良好代码习惯的
• 希望大家督促进步的
• …

如果有兴趣的小伙伴可以联系我VX：LHQfighting，如果小伙伴多了起来后我们将采用正规的开发流程和分支管理！

10.未来计划

目前一阶段算是基本完成吧，后续就是需要继续添加新功能和修复bug了，所以还是列一个计划清单吧，当然，最终不一定会按照清单去做：

• 继续新增简历模板
• 修复已知bug
• 提供简历下载功能
• 提供服务端功能
• 优化JSON结构
• 支持用户上传JSON
• …

当然，小伙伴们如果有好的点子，可以向我提需求，通过issue或者VX都可以。