项目开源地址：github.com/huajian-pro…

项目线上地址： huajian.smallpig.site/

项目开发环境线上地址： huajiandev.smallpig.site/

项目技术栈： Vue3 + Vite3.x + Element-plus + Pinia + TypeScript

项目所需环境： Node 16+、pnpm

本篇文章基于项目版本： release-v2.0.0

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

前言

目前化简（resume-design）开源项目发布了两个版本，两个版本都是纯前端项目。第一个版本即v1.0.0版本只有简单的固定几个模板，我们如果想要添加新的模板时需要编写一套完整的简历模板代码，比较麻烦！

在第二个版本即v2.0.0时，我们的模板支持网页端生成了，即在网页端通过自由组合物料组件，可以快速生成模板，我们唯一需要做的就是编写自己喜欢的物料组件。

注意：此文章适用于项目release-v2.0.0版本，其它版本可能会有一些变动。

1.项目目录介绍

这里主要介绍项目中一些主要目录的作用以及描述，以便于后续讲解。

├─ build		  // vite打包配置相关文件目录
├─ doc			  // 项目相关文档
├─ public         // 公共资源目录
│  ├─ json        // 模板JSON文件存放目录
├─ types          // 全局类型声明目录
├─ src
│  ├─ assets      // 资源文件存放目录
│  ├─ components  // 公共组件存放路径
│  ├─ config      // 相关配置文件
│  ├─ dictionary  // 相关字典文件存放目录
│  ├─ hooks       // 定义的一些Vue3的hooks
│  ├─ http        // 全局请求封装目录
│  ├─ interface   // 接口文件存放目录
│  ├─ material    // 物料组件存放目录
│  ├─ options     // 属性面板设置组件存放目录
│  ├─ router      // 路由文件存放目录
│  ├─ schema      // 简历模板JSON格式定义
|  ├─ store       // 状态管理文件夹
|  ├─ style      // 一些样式文件
|  ├─ template    // 简历模板配置文件
|  ├─ utils       // 工具函数
|  ├─ views       // 页面文件
|  └─ App.vue     // 主入口页面
|  └─ env.d.ts    // ts类型声明文件
|  └─ main.ts     // 项目主入口文件

以上只列出了主要目录以及作用，其它相关文件大家自行查看便可理解。

2.新增模板

release-v2.0.0版本增加模板在网页端操作，无需在项目里面单独编写模板文件。

第一步：进入自定义模板界面

路由地址：/custom

第二步：拖拽或点击左侧组件至中间区域

在右侧属性面板可以设置相关数据以及主题等。

第三步：导出为JSON文件

点击右上角的导出为JSON文件按钮，然后在项目目录public/json下新建template6目录，将json文件重命名为template.json，然后移动至此目录下，最终结果如下图：

这里需要注意的是json文件必须为template.json。

第四步：保存预览图

为了让模板在首页能够有预览图，我们需要保存一张图片至项目src/assets/images目录下，这里可以采取截图的方式，比如下方保存的列子：

第六步：配置模板字典列表

因为暂未接入后台服务，所以我们首页的模板列表是保存在本地项目的。为了能够让我们新增的模板出现在首页的列表当中，如下图：

进入项目src/template/index.ts文件，按照规则添加一项，如下列代码：

{
  id: '6',
  name: 'template6',
  preview: 'template6.png'
}

id按顺序增加即可，name需要和我们public/json下面的文件目录保持对应，preview即预览图，字段值也应该和刚刚保存的文件名称一致。

这样首页就有我们新增的模板了，也可以直接进行编辑了！

3.新增物料组件

在新增模板的时候我们发现很方便，但是在这前提之下是我们有着丰富的物料组件，比如我们[实习经验]模块下有这些物料组件：

接下来我们就以新增一个[实习经验]物料组件为例。

第一步：新建物料组件

在项目src/material/CampusExperience目录下新建CampusExperience4目录，然后新建CampusExperience.vue文件，如下所示：

第二步：注册物料组件

编写好了物料组件，我们需要注册它，注册物料组件统一在utils/registerMaterialCom.ts文件中，根据其它组件注册案列，注册自己编写的物料组件。

utils/registerMaterialCom.ts：

第四步：新增物料组件列表

由于数据存储在前端，所以组件列表数据我们放入了一个文件夹管理，进入schema/materialList.ts文件中，找到CampusExperience选项，然后在选项中新增一项，示例代码如下：

{
  keyId: '', // 组件id
  model: 'INTERNSHIP_EXPERIENCE', // 模块
  cptName: 'INTERNSHIP_EXPERIENCE_4', // 组件名
  cptOptionsName: 'INTERNSHIP_EXPERIENCE_OPTIONS',
  cptTitle: '实习经验', // 组件名
  cptX: 0, // 组件x坐标
  cptY: 0, // 组件y坐标
  cptZ: 0, // 组件z坐标
  cptHeight: '50px', // 组件高度
  cptWidth: '100%', // 组件宽度
  layout: 'center', // 布局在左侧还是右侧
  show: true, // 组件是否显示
  style: {
    themeColor: '#254665',
    firstTitleFontSize: '20px',
    textColor: '#757575',
    textFontSize: '14px',
    textFontWeight: 500,
    titleColor: '#666666',
    titleFontSize: '14px',
    titleFontWeight: 600,
    backgroundColor: '#000',
    mBottom: '0px',
    mTop: '0px',
    pTop: '0',
    pBottom: '0',
    pLeftRight: '25px'
  }, // 组件样式
  data: {} // 组件数据
}

上面有两个字段是需要我们注意的：

cptName：组件名，需要和utils/registerMaterialCom.ts文件中我们定义的组件名相统一。
cptOptionsName：如果自己定义了属性设置面板，那么这里也需要改为我们自己定义的属性面板名称。

第五步：新增属性面板组件

目前项目中存在的属性面板组件基本满足要求，如果有需要，也可以自己重新编写属性设置面板组件。在src/options目录下新建自己的属性面板组件，组件内容可以参考其它组件。

第六步：注册属性面板组件

和注册物料组件类似，我们在utils/registerMaterialOptionsCom.ts文件中注册属性面板组件，需要注意的是注册的组件名称需要与cptOptionsName字段对应。

第七步：设置物料组件预览图

和模板预览图类似，我们物料组件也需要预览图，预览图可以在我们编写好物料组件后截取一张图，存放至src/assets/images/material中，具体存放在哪个目录以及文件命名可以参考已经存在的文件。

然后我们还需要定义字典，进入src/dictionary/cptOfImg.ts目录，依照其它案列新增一项，如下代码所示：

INTERNSHIP_EXPERIENCE_4: {
  url: 'INTERNSHIP_EXPERIENCE_4.png',
  width: '100%',
  height: ''
}

这里需要注意的是url字段需要与刚刚保存的文件名相对应，不然无法加载图片。

到这里我们的一个物料组件就添加成功了，此时在网页自定义模板页面中就可以看到我们新增的物料组件了：

总结

由于我们目前项目还是一个纯前端项目，所以很多数据存储在前端。项目目录结构还在不断的优化中，同一个模板我们可以更改不同主题让它变为多个模板。

最后：希望大家多多提意见和star支持！

进入微信交流群+vx：LHQfighting

【化简】简历开源项目——教你如何新增模板和物料组件

前言

1.项目目录介绍

2.新增模板

3.新增物料组件

总结