很多人看到里边有好看的东西就习惯性的点进来看看，还一边点一边想 —— 好看的简历我见多了，你这个又能好看到哪里去。我想差不多可以：

吧

因为最近有在准备简历，就习惯性的找一找有没有现成的简历模板。结果全是付费的，丑的收5块，稍微讲究一点的就差不多要10块钱了，这让一个普通家庭出身的年轻人怎么负担得起。
于是就产生了写一个简历模板的想法，后来就有了这个轻量的简历神器。

地址： luosijie.github.io/vue-resume/…

源码： github.com/luosijie/vu…

使用方法

简历模板的操作可以说很简单，基本上把握住这么几个原则

想改哪里点哪里
右键删除
加号增加

应用场景

简历作为图片下载后,可以

直接作为招聘网站的附件简历
打印出来：实际效果稍微有点模糊，不过在可接受范围

不足之处

写这个的初衷是做一个便捷好用的简历模板，但我觉得距离实现这个目标还有一段距离。目前还有以下缺陷

不能选择模板样式
不支持多页简历
不支持转换为PDF

功能实现

这是一个基于Vue的项目，从最后实现来看，本身没什么技术难点。不过也要考虑实际用户需求和应用场景，然后将这些和 自己的技术水平 和 愿意投入的时间成本 做一个平衡。

Logo设计

Logo设计无关技术，只不过项目无论大小，我感觉有一个Logo才完整。不过关于Logo设计，大多数人是不太懂的, 我自己总结了一条规律：只要你设计的Logo让人一眼没看懂，基本上就成功了一半了。就好像你看出下面的Logo是字母 “V” 和 “R” 的结合体吗。

Logo

下面是Logo的设计过程

功能分析

这个项目最基本的单元是图片和文字然后组成各个 list组件 ，包括 About me, Skill, Education, Working Experience等。

图片文字组件

图片和文字只要实现可编辑功能就可以了。

文字

<p contenteditable="true">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit metus in libero rutrum congue aliquam eu libero. Donec tristique est pharetra fringilla sollicitudin. Etiam eu ipsum vitae nulla tincidunt scelerisque semper id arcu. Phasellus quam tellus, laoreet id felis a, dignissim facilisis orci. Mauris feugiat vulputate quam quis tincidunt. In eleifend augue eu tristique bibendum. Donec gravida, eros sed iaculis iaculis, magna est finibus tortor, ultricies accumsan diam lorem non neque.
</p>

图片

edit-image.vue

基本上就是将本地图片上传并转为base64格式

<template>
  <div class="edit-image" :style="{ width: width + 'px', height: height + 'px'}">
    <img :src="imgSrc" alt="image" :class="{ circle: isCircle }">
    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage">
  </div>
</template>
<script>
  export default {
    name: 'EditImage',
    props: {
     ...
    },
    data: function () {
      return {
        imgSrc: this.src
      }
    },
    methods: {
      changeImage: function (evt) {
        let _this = this
        let reader = new FileReader()
        let file = evt.target.files[0]
        reader.readAsDataURL(file)
        reader.onload = function (evt) {
          _this.imgSrc = evt.target.result
        }
      }
    }
  }
</script>

List组件

context-list.vue

List组件要实现 About me, Skill, Education, Working Experience 这些组件的通用功能。也就是:

标题
内容
增加条目

<template>
  <div class="context-list" :class="{ 'icon-margin-bottom': icon }">
    <div class="list-heading" :class="{ 'icon-class': icon }">
      <div class="title">
        <EditImage v-if="icon" :src="icon" height="36" width="36" class="img"></EditImage>
        <h2 class="title" contenteditable="true">{{title}}</h2>
      </div>
      <button class="add" @click="add" :class="{ 'icon-margin-right': icon }">+</button>
    </div>
    // 实现内容功能
    <ul id="luo">
      <ListItemAbout v-if="title == 'About me'" v-for="item in arry" :key="item.id"></ListItemAbout>
      <ListItemSkill v-if="title == 'Skill'" v-for="item in arry" :key="item.id"></ListItemSkill>
      <ListItemEducation v-if="title == 'Education'" v-for="item in arry" :key="item.id"></ListItemEducation>
      <ListItemExperience v-if="title == 'Working Experience'" v-for="item in arry" :key="item.id"></ListItemExperience>
      <ListItemInfo v-if="icon" v-for="item in arry" :key="item.id"></ListItemInfo>
      <slot name="listItem"></slot>
    </ul>
  </div>
</template>
<script>
  ...
  export default {
    name: 'ContextList',
    components: {
      EditImage,
      ListItemAbout,
      ListItemSkill,
      ListItemEducation,
      ListItemExperience,
      ListItemInfo
    },
    props: {
      // 实现标题功能
      title: {
        type: String,
        default: 'Title'
      },
      icon: {
        type: String,
        default: ''
      }
    },
    data: function () {
      return {
        arry: []
      }
    },
    methods: {
      showAdd: function () {
        this.add = true
      },
      // 实现条目增加功能
      add: function () {
        this.arry.push(1)
      }
    }
  }
</script>
<style>
  ...
</style>

List-item组件

list-item.vue

List-item组件主要实现每个条目的删除功能, 然后不同类型的条目在 list-Item组件的基础上定义各自的内容

<template>
  <li class="list-item" @contextmenu.prevent="showControl" v-if="listItem">
    <slot></slot>
    <div v-if="listControl" class="list-control">
      <span @click="deleteControl">delete</span>
      <span @click="cancelControl">cancel</span>
    </div>
  </li>
</template>
<script>
  export default {
    name: 'ListItem',
    data: function () {
      return {
        listControl: false,
        listItem: true
      }
    },
    methods: {
      // 显示控件
      showControl: function () {
        this.listControl = true
      },
      // 取消操作
      cancelControl: function () {
        this.listControl = false
      },
      // 删除控件
      deleteControl: function () {
        this.listItem = false
      }
    }
  }
</script>

先这样了欢迎star

送给大家一个好看的简历神器