送給你們一個好看的簡歷神器

不少人看到裏邊有好看的東西就習慣性的點進來看看，還一邊點一邊想 —— 好看的簡歷我見多了，你這個又能好看到哪裏去。我想差很少能夠：

哪裏

吧

由於最近有在準備簡歷，就習慣性的找一找有沒有現成的簡歷模板。結果全是付費的，醜的收5塊，稍微講究一點的就差很少要10塊錢了，這讓一個普通家庭出身的年輕人怎麼負擔得起。
因而就產生了寫一個簡歷模板的想法，後來就有了這個輕量的簡歷神器。

vue-resume

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

源碼： github.com/luosijie/vu…

使用方法

簡歷模板的操做能夠說很簡單，基本上把握住這麼幾個原則

1. 想改哪裏點哪裏
2. 右鍵刪除
3. 加號增長

應用場景

簡歷做爲圖片下載後,能夠

1. 直接做爲招聘網站的附件簡歷
2. 打印出來：實際效果稍微有點模糊，不過在可接受範圍

不足之處

寫這個的初衷是作一個便捷好用的簡歷模板，但我以爲距離實現這個目標還有一段距離。目前還有如下缺陷

1. 不能選擇模板樣式
2. 不支持多頁簡歷
3. 不支持轉換爲PDF

功能實現

這是一個基於Vue的項目，從最後實現來看，自己沒什麼技術難點。不過也要考慮實際用戶需求和應用場景，而後將這些和 本身的技術水平 和 願意投入的時間成本 作一個平衡。

Logo設計

Logo設計無關技術，只不過項目不管大小，我感受有一個Logo才完整。不過關於Logo設計，大多數人是不太懂的, 我本身總結了一條規律：只要你設計的Logo讓人一眼沒看懂，基本上就成功了一半了。 就好像你看出下面的Logo是字母 「V」 和 「R」 的結合體嗎。

Logo

下面是Logo的設計過程

Logo_process

功能分析

這個項目最基本的單元是 圖片 和 文字 而後組成各個 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-item組件

List組件要實現 About me, Skill, Education, Working Experience 這些組件的通用功能。也就是:

1. 標題
2. 內容
3. 增長條目

<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組件 主要實現每一個條目的刪除功能, 而後不一樣類型的條目在 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