送给你们一个好看的简历神器

时间 2019-11-06

标签送给你们一个好看简历神器栏目快乐工作繁體版

原文原文链接

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

吧

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

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

源码： github.com/luosijie/vu…bash

使用方法

简历模板的操做能够说很简单，基本上把握住这么几个原则网站

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

应用场景

简历做为图片下载后,能够ui

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

不足之处

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

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

功能实现

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

Logo设计

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

Logo

下面是Logo的设计过程3d

功能分析

这个项目最基本的单元是图片和文字而后组成各个 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