> Create by **jsliang** on **2018-12-5 11:48:56** > Recently revised in **2018-12-9 22:31:51**
**Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！[GitHub 地址](https://github.com/LiangJunrong/document-library)**
【2019-08-16】Hello 小伙伴们，由于 **jsliang** 对文档库进行了重构，这篇文章的一些链接可能失效，而 **jsliang** 没有精力维护掘金这边的旧文章，对此深感抱歉。请需要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。
互联网冬天？裁员？跳槽？最近频繁听身边朋友说公司裁员、员工跳槽的事情，然后帮几个还没毕业的小师弟修改了几份简历，结果嘛，enmmm...... **咱使用 Vue + ECharts + ElementUI 来打造份在线个人简历，并将它部署到 GitHub Pages 上来展示吧！** ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/16793601f7129acc~tplv-t2oaga2asx-image.image) 涉及技术： * Vue * Vue-Router * ECharts * ElementUI * HTML/HTML5 * CSS/CSS3 * JavaScript/ES6
# 一目录 **不折腾的前端，和咸鱼有什么区别** | 目录 | | --- | | [一目录](#chapter-one) | | [二前言](#chapter-two) | | [三整体搭建](#chapter-three) | | [3.1 基础配置](#chapter-three-one) | | [3.2 安装 ECharts](#chapter-three-two) | | [3.3 安装 ElementUI](#chapter-three-three) | | [3.4 总体配置](#chapter-three-four) | | [四分步实现](#chapter-four) | | [4.1 part1 - 基本信息](#chapter-four-one) | | [4.2 part2 - 好友分布](#chapter-four-two) | | [4.3 part3 - 技能特长](#chapter-four-three) | | [4.4 part4 - 文章成就](#chapter-four-four) | | [4.5 part5 - 工作经验](#chapter-four-five) | | [4.6 part6 - 编程技能](#chapter-four-six) | | [4.7 part7 - 求职意向](#chapter-four-seven) | | [五总结](#chapter-five) |
# 二前言 > [返回目录](#catalog-chapter-two)
在使用 Vue + ECharts 编写公司报表项目的时候，突如其来有个 idea，想到好像可以写个在线简历。 **于是，就去做了。** 文章中的见解仅代表个人观点，不代表 “最优想法”，请文明评论、科学参考。如有更好建议，可加 **jsliang** 的文档库 WX 群讨论：https://github.com/LiangJunrong/document-library 谢谢~
# 三整体搭建 > [返回目录](#catalog-chapter-three)
工欲善其事，必先利其器。在我们进行愉快折腾之前，我们需要将代码的环境搭建好，才能如鱼得水，更好地开发。
## 3.1 基础配置 > [返回目录](#catalog-chapter-three-one)
首先，我们在指定目录下，通过控制台（终端）新建一个 `Vue-Cli` 项目： * `vue init webpack` ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935d8768fa756~tplv-t2oaga2asx-image.image) 然后，我们使用 `npm i` 安装 `Vue-Cli` 的依赖，生成 `node_modules` 文件夹。最后，我们引入 `CSS reset`，并清理下红框内文件，之后项目变为如下所示： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935db66e3235e~tplv-t2oaga2asx-image.image) 此刻我们的一些文件发生了变动： > HelloWorld.vue ``` ```
> App.vue ``` ```
> main.js ``` import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // 引入样式重置 import '../static/css/reset.css' new Vue({ el: '#app', router, components: { App }, template: '' }) ```
> reset.css ``` /* * reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 * The purpose of reset is not to allow default styles to be consistent across all browsers, but to reduce the potential problems of default styles. * create by jsliang */ /** 清除内外边距 - clearance of inner and outer margins **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 结构元素 - structural elements */ dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */ pre, /* 文本格式元素 - text formatting elements */ form, fieldset, legend, button, input, textarea, /* 表单元素 - from elements */ th, td /* 表格元素 - table elements */ { margin: 0; padding: 0; } /** 设置默认字体 - setting the default font **/ body, button, input, select, textarea { font: 18px/1.5 '黑体', Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; } /** 重置列表元素 - reset the list element **/ ul, ol { list-style: none; } /** 重置文本格式元素 - reset the text format element **/ a, a:hover { text-decoration: none; } /** 重置表单元素 - reset the form element **/ button { cursor: pointer; } input { font-size: 18px; outline: none; } /** 重置表格元素 - reset the table element **/ table { border-collapse: collapse; border-spacing: 0; } /** 图片自适应 - image responsize **/ img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; } /* * 默认box-sizing是content-box，该属性导致padding会撑大div，使用border-box可以解决该问题 * set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger */ div, input { box-sizing: border-box; } /** 清除浮动 - clear float **/ .jsliang-clear:after, .clear:after { content: '\20'; display: block; height: 0; clear: both; } .jsliang-clear, .clear { *zoom: 1; } /** 设置input的placeholder - set input placeholder **/ input::-webkit-input-placeholder { color: #919191; font-size: .26rem } /* Webkit browsers */ input::-moz-placeholder { color: #919191; font-size: .26rem } /* Mozilla Firefox */ input::-ms-input-placeholder { color: #919191; font-size: .26rem } /* Internet Explorer */ ``` 当然，怕小伙伴们嫌麻烦，不想敲代码。所以 **jsliang** 直接上传了基础代码，需要的小伙伴直接下载即可： [ECharts 打造在线个人简历分支 - 基础配置](https://github.com/LiangJunrong/CurriculumVitae/tree/basic-configuration)
## 3.2 安装 ECharts > [返回目录](#catalog-chapter-three-two)
既然说了用 ECharts 来写，那么，我们肯定要搞下 ECharts 的安装啦~ **首先**，我们在项目中安装 ECharts 依赖： ``` npm i echarts -S ``` **然后**，你可以选择按需引用还是全局引用（个人建议使用按需引用）： 1. **全局引用** ECharts 初始化应在钩子函数 `mounted()` 中，这个钩子函数是在 `el` 被新创建的 `vm.$el` 替换，并挂载到实例上去之后调用。 > 项目/src/main.js ``` import Vue from 'vue' import App from './App' import router from './router' // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '' }) ```
> 项目/src/components/HelloWorld.vue ``` ```
2. **按需引用** 如果我们使用全局引用。将 ECharts 图表打包，会导致体积过大，所以项目中最好按需引入。在这里我们使用 `requrie` 引用而不是 `import`，是因为 `import` 必须写全路径，比较麻烦。 > 项目/src/components/HelloWorld.vue ``` ```
**最后**，我们只需要 `npm run dev` 启动项目，打开 `localhost:8080` 即可： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935de3c510936~tplv-t2oaga2asx-image.image) 当然，仅仅带进门，可能小伙伴们还可能会感觉懵逼：下一步我要怎么做？所以，**jsliang** 顺带讲讲 ECharts 如何上手： 1. 照着上面案例敲一遍 2. 过一遍它的上手文档：[5 分钟上手 ECharts](http://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts) 3. 查看它的各种实例，并从自己要做的简单的图做起 4. 在步骤 3 中，碰到不懂的属性值，记得随时查看文档：[文档 - 配置项手册](http://www.echartsjs.com/option.html#title) 如此，小伙伴们就可以更好上手 ECharts 啦~
## 3.3 安装 ElementUI > [返回目录](#catalog-chapter-three-three)
考虑到 UI 是我，开发还是我。那么，尽情使用 UI 框架吧！这里偷懒用 ElementUI 咯。然后，为了使项目尽可能小巧，**jsliang** 打算按需引入 ElementUI： 1. 安装 ElementUI：`npm i element-ui -S` 2. 安装 babel-plugin-component：`npm i babel-plugin-component -D` 3. 修改 .babelrc： > .babelrc ``` { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": [ "transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 4. 按需引入 `Row` 与 `Col`： > main.js ``` import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // 引入样式重置 import '../static/css/reset.css' // 引入及使用 ElementUI import {Row, Col} from 'element-ui'; Vue.use(Row).use(Col); new Vue({ el: '#app', router, components: { App }, template: '' }) ``` 这样，就可以在项目中使用这两个组件了： > 项目/src/components/HelloWorld.vue 代码片段 ``` ``` ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935e044625f72~tplv-t2oaga2asx-image.image)
## 3.4 总体配置 > [返回目录](#catalog-chapter-three-four)
该需要的东东，都差不多准备好了。那么，我们的简历，长啥样呢？由于手里木有成品 “参考” 和 “借鉴”，所以去网上看看别人的 ECharts 都长啥样吧： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935e26279c1ce~tplv-t2oaga2asx-image.image) 如图，**jsliang** 觉得这图的布局不错，所以下载下来了它的 png 版本和 psd 版本。然后，怕小伙伴们难以想象要怎么操作，我用 PS 修改下它的 psd 吧： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935e5981749cc~tplv-t2oaga2asx-image.image) 很好，这个在线个人简历要怎么做就一目了然了。下面我们开始切图仔工作： **首先**，创建 7 个 `components`，并删除 `HelloWorld.vue`： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935e7cdf6bc93~tplv-t2oaga2asx-image.image) **jsliang** 太懒，名字就懒得想了，从左到右，从上到下，依次命名 7 个框的名字为 `PartOne` 到 `PartSeven` 吧。 > PartOne.vue 代码示例 ``` ``` > 说到这里，有的小伙伴可能觉得复制粘贴或者手写 Vue-Cli 代码特别烦，所以这里推荐使用 VS Code 的插件：`Vue VSCode Snippets`。通过在页面上敲：`vbase`，就可以快速生成 Vue-Cli 的基础代码了。
**然后**，我们在 `index.js` 中定义这些文件，并在 `App.vue` 引用它们： > 项目/src/router/index.js ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const PartOne = () => import('@/components/PartOne'); const PartTwo = () => import('@/components/PartTwo'); const PartThree = () => import('@/components/PartThree'); const PartFour = () => import('@/components/PartFour'); const PartFive = () => import('@/components/PartFive'); const PartSix = () => import('@/components/PartSix'); const PartSeven = () => import('@/components/PartSeven'); export default new Router({ routes: [ { path: '/', components: { PartOne: PartOne, PartTwo: PartTwo, PartThree: PartThree, PartFour: PartFour, PartFive: PartFive, PartSix: PartSix, PartSeven: PartSeven } }, { path: '/PartOne', name: 'PartOne', component: PartOne }, { path: '/PartTwo', name: 'PartTwo', component: PartTwo }, { path: '/PartThree', name: 'PartThree', component: PartThree }, { path: '/PartFour', name: 'PartFour', component: PartFour }, { path: '/PartFive', name: 'PartFive', component: PartFive }, { path: '/PartSix', name: 'PartSix', component: PartSix }, { path: '/PartSeven', name: 'PartSeven', component: PartSeven }, ] }) ```
> 项目/src/App.vue ``` ```
此时，通过 `npm run dev`，我们可以在 `localhost:8080/#/` 中可以看到我们已成功进行了布局： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935ea18c6c74e~tplv-t2oaga2asx-image.image)
**最后**，我们通过 CSS 的渲染，成功实现我们的总体布局： > 此刻的项目结构图： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935ec1629374e~tplv-t2oaga2asx-image.image) > App.vue ``` ```
> main.js ``` import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // 引入样式重置 import '../static/css/reset.css' // 引入 ElementUI 响应式断点 import 'element-ui/lib/theme-chalk/display.css'; // 引入及使用 ElementUI import {Row, Col} from 'element-ui'; Vue.use(Row).use(Col); new Vue({ el: '#app', router, components: { App }, template: '' }) ```
> PartOne.vue ( PartTwo 及其他 6 个文件雷同) ``` ```
这样，我们就成功完成了高尚的切图仔工作，可以继续下一步咯： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935ee79c8c819~tplv-t2oaga2asx-image.image) 为了防止小伙伴们晕乎，保险起见 **jsliang** 将总体配置的代码提交到了分支，需要的小伙伴直接下载即可： [ECharts 打造在线个人简历分支 - 完整配置](https://github.com/LiangJunrong/CurriculumVitae/tree/overall-configuration)
# 四分步实现 > [返回目录](#catalog-chapter-four)
**提问**：简历一般有什么内容？ **回答**： 1. 基本信息：姓名、工作年限、学历、格言、年龄、联系电话、电子邮箱、GitHub、掘金…… 2. 求职意向：职位、城市、薪资、准备入职时间…… 3. 工作经验：…… 4. 个人技能：熟悉 HTML5、CSS3、JavaScript…… 5. 教育背景/荣誉证书（这两样没有很出彩的地方的话，**jsliang** 建议就忽略不写了）所以，我们就着这几方面来编写我们的简历吧~
## 4.1 part1 - 基本信息 > [返回目录](#catalog-chapter-four-one)
话不多说，先上代码： > PartOne.vue ``` ``` 实现效果： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935f0bbfd0036~tplv-t2oaga2asx-image.image) 如上，这只是个简单的信息填充，就不多说了。
## 4.2 part2 - 好友分布 > [返回目录](#catalog-chapter-four-two)
话不多说，先上代码： > PartTwo.vue ``` ``` 实现效果： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935f38962c6b4~tplv-t2oaga2asx-image.image) **首先**，我们引用了 ECharts 及它的中国地图： ``` let echarts = require("echarts/lib/echarts"); require("echarts/map/js/china.js"); ``` **然后**，我们初始化 DOM 和数据： ``` let myChart = echarts.init(document.getElementById("part-two")); let myFriendData = [ { name: "山东", value: 1 }, { name: "四川", value: 1 }, { name: "广东", value: 21 }, { name: "广西", value: 1 }, { name: "北京", value: 12 }, { name: "甘肃", value: 1 }, { name: "上海", value: 5 }, { name: "陕西", value: 4 }, { name: "湖北", value: 1 }, { name: "湖南", value: 1 }, { name: "山西", value: 1 }, { name: "辽宁", value: 2 }, { name: "江苏", value: 1 }, { name: "河北", value: 3 }, { name: "海南", value: 1 }, { name: "河南", value: 1 } ]; ``` **最后**，我们通过 `setOption` 实现了地图的描绘，上面配置仅是个人配置方法，详细的方法请参考：[ECharts 配置](http://www.echartsjs.com/option.html#title)。
## 4.3 part3 - 技能特长 > [返回目录](#catalog-chapter-four-three)
说到简历，还记得之前看过一份，印象特深，因为人家就是用 Word 中用图表展示的。所以，咱也试试： > PartThree.vue ``` ``` 如上，我们就设置好了： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935f611438541~tplv-t2oaga2asx-image.image)
## 4.4 part4 - 文章成就 > [返回目录](#catalog-chapter-four-four)
有时候就是想偷懒，也想不起自己还有啥好吹水的了，于是贴个自己的前端文档库的成就吧： > PartFour.vue ``` ``` ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935f86e30920f~tplv-t2oaga2asx-image.image)
## 4.5 part5 - 前端研发 > [返回目录](#catalog-chapter-four-five)
简历一大重点，就是工作经验啦： > PartFive.vue ``` ``` 结果显示为： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935fb1dcccd7d~tplv-t2oaga2asx-image.image)
## 4.6 part6 - 编程技能 > [返回目录](#catalog-chapter-four-six)
除了工作经验，我们还需要 show 一下我们的编程技能都有什么： > PartSix.vue ``` ```
成果如下图所示： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935fd36526453~tplv-t2oaga2asx-image.image)
## 4.7 part7 - 求职意向 > [返回目录](#catalog-chapter-four-seven)
最后，当然要表明我们的求职意向，好让 HR 小姐姐知道我们想要什么啦~ > PartSeven.vue ``` ```
结果如下图所示： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/167935ff5e1234b6~tplv-t2oaga2asx-image.image) 至此，所有代码编写完毕，偷懒的小伙伴可以去下面地址下载所有代码： * [ECharts 打造在线个人简历](https://github.com/LiangJunrong/CurriculumVitae)
# 五总结 > [返回目录](#catalog-chapter-five)
最后再看下我们的最终成品： ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/12/9/16793601f7129acc~tplv-t2oaga2asx-image.image) OK，到这里，也是时候将这份成品放到我们的线上啦： **[使用 GitHub Pages 和 VuePress 搭建网站](https://github.com/LiangJunrong/document-library/blob/master/other-library/Website/GithubPages/DocumentLibrary.md)** 我们只需要搭建个 GitHub Pages 的账号，就可以部署这份在线简历咯~ 当然 **jsliang** 有自己的服务器哈，就没使用 GitHub Pages 了，感兴趣的小伙伴可以跟着上面的文章折腾去~ 所以，这篇文章就结束啦！
> 番外：哈哈，**jsliang** 已经 **预** **感** **到** **了**： **你的好友喷子小哥上线啦！** * “哇，这样用 ECharts 的吗？还能不能更 low 点？！” * “哇，Vue 这样写的吗？你懂不懂 Vue？” * “哇，……” enm......所以我不管怎么说，都说不过这些大佬的，所以有的评论就不回复啦，哈哈~ **最后，在此祝小伙伴们找到更好的工作~** * **小伙伴们如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！[GitHub 地址](https://github.com/LiangJunrong/document-library/blob/master/JavaScript-library/ECharts/CurriculumVitae.md)**
>

jsliang 的文档库由梁峻荣采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。