内容简介:Create byRecently revised in互联网冬天?裁员?跳槽?
Create by jsliang on 2018-12-5 11:48:56
Recently revised in 2018-12-9 22:31:51
Hello 小伙伴们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更精彩文章的动力! GitHub 地址
互联网冬天?裁员?跳槽?
最近频繁听身边朋友说公司裁员、员工跳槽的事情,然后帮几个还没毕业的小师弟修改了几份简历,结果嘛,enmmm......
咱使用 Vue + ECharts + ElementUI 来打造份在线个人简历,并将它部署到免费的服务器上去吧!
最终成品线上地址:点击查看
涉及技术:
- Vue
- Vue-Router
- ECharts
- ElementUI
- HTML/HTML5
- CSS/CSS3
- JavaScript/ES6
一 目录
不折腾的前端,和咸鱼有什么区别
目录 |
---|
二 前言
在使用 Vue + ECharts 编写公司报表项目的时候,突如其来有个 idea,想到好像可以写个在线简历。
于是,就去做了。
文章中的见解仅代表个人观点,不代表 “最优想法”,请文明评论、科学参考。
如有更好建议,可加 jsliang 的文档库 QQ 群讨论: 798961601
。
谢谢~
三 整体搭建
工欲善其事,必先利其器。
在我们进行愉快折腾之前,我们需要将代码的环境搭建好,才能如鱼得水,更好地开发。
3.1 基础配置
首先,我们在指定目录下,通过控制台(终端)新建一个 Vue-Cli
项目:
-
vue init webpack
然后,我们使用 npm i
安装 Vue-Cli
的依赖,生成 node_modules
文件夹。
最后,我们引入 CSS reset
,并清理下红框内文件,之后项目变为如下所示:
此刻我们的一些文件发生了变动:
HelloWorld.vue
<template> <div class="hello"> </div> </template> <script> export default { name: 'HelloWorld', data () { return { } } } </script> <style scoped> </style> 复制代码
App.vue
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> </style> 复制代码
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: '<App/>' }) 复制代码
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 直接上传了基础代码,需要的小伙伴直接下载即可:
3.2 安装 ECharts
既然说了用 ECharts 来写,那么,我们肯定要搞下 ECharts 的安装啦~
首先,我们在项目中安装 ECharts 依赖:
npm i echarts -S 复制代码
然后,你可以选择按需引用还是全局引用(个人建议使用按需引用):
- 全局引用
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: '<App/>' }) 复制代码
项目/src/components/HelloWorld.vue
<template> <div> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } } </script> <style scoped> </style> 复制代码
- 按需引用
如果我们使用全局引用。将 ECharts 图表打包,会导致体积过大,所以项目中最好按需引入。
在这里我们使用 requrie
引用而不是 import
,是因为 import
必须写全路径,比较麻烦。
项目/src/components/HelloWorld.vue
<template> <div> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div> </template> <script> // 引入基本模板 let echarts = require("echarts/lib/echarts"); // 引入柱状图组件 require("echarts/lib/chart/bar"); // 引入提示框和title组件 require("echarts/lib/component/tooltip"); require("echarts/lib/component/title"); export default { name: 'hello', data() { return { msg: 'Welcome to Your Vue.js App' } }, mounted() { this.drawLine(); }, methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } }; </script> <style scoped> </style> 复制代码
最后,我们只需要 npm run dev
启动项目,打开 localhost:8080
即可:
当然,仅仅带进门,可能小伙伴们还可能会感觉懵逼:下一步我要怎么做?
所以, jsliang 顺带讲讲 ECharts 如何上手:
- 照着上面案例敲一遍
- 过一遍它的上手文档:5 分钟上手 ECharts
- 查看它的各种实例,并从自己要做的简单的图做起
- 在步骤 3 中,碰到不懂的属性值,记得随时查看文档:文档 - 配置项手册
如此,小伙伴们就可以更好上手 ECharts 啦~
3.3 安装 ElementUI
考虑到 UI 是我,开发还是我。
那么,尽情使用 UI 框架吧!这里偷懒用 ElementUI 咯。
然后,为了使项目尽可能小巧, jsliang 打算按需引入 ElementUI:
npm i element-ui -S npm i babel-plugin-component -D
.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" } ] ] } 复制代码
- 按需引入
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: '<App/>' }) 复制代码
这样,就可以在项目中使用这两个组件了:
项目/src/components/HelloWorld.vue 代码片段
<template> <div> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> <el-row> <el-col :span="8">111</el-col> <el-col :span="8">222</el-col> <el-col :span="8">333</el-col> </el-row> </div> </template> 复制代码
3.4 总体配置
该需要的东东,都差不多准备好了。
那么,我们的简历,长啥样呢?
由于手里木有成品 “参考” 和 “借鉴”,所以去网上看看别人的 ECharts 都长啥样吧:
如图, jsliang 觉得这图的布局不错,所以下载下来了它的 png 版本和 psd 版本。
然后,怕小伙伴们难以想象要怎么操作,我用 PS 修改下它的 psd 吧:
很好,这个在线个人简历要怎么做就一目了然了。
下面我们开始切图仔工作:
首先,创建 7 个 components
,并删除 HelloWorld.vue
:
jsliang太懒,名字就懒得想了,从左到右,从上到下,依次命名 7 个框的名字为 PartOne
到 PartSeven
吧。
PartOne.vue 代码示例
<template> <div> <p>第一部分</p> </div> </template> <script> export default { } </script> <style scoped> </style> 复制代码
说到这里,有的小伙伴可能觉得复制粘贴或者手写 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
<template> <div class="app" id="app"> <!-- 第一行 --> <el-row> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part"> <router-view name="PartOne"/> </el-col> <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part"> <router-view name="PartTwo"/> </el-col> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part"> <router-view name="PartThree"/> </el-col> </el-row> <!-- 第二行 --> <el-row> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part"> <router-view name="PartFour"/> </el-col> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part"> <router-view name="PartFive"/> </el-col> <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part"> <router-view name="PartSix"/> </el-col> <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part"> <router-view name="PartSeven"/> </el-col> </el-row> </div> </template> <script> export default { name: 'App' } </script> <style> </style> 复制代码
此时,通过 npm run dev
,我们可以在 localhost:8080/#/
中可以看到我们已成功进行了布局:
最后,我们通过 CSS 的渲染,成功实现我们的总体布局:
此刻的项目结构图:
App.vue
<template> <div class="app" id="app"> <div class="banner"> <img class="hidden-md-only hidden-lg-only hidden-xl-only" :src="bannerXSSM" alt="banner 图"> <img class="hidden-xs-only hidden-sm-only hidden-lg-only hidden-xl-only" :src="bannerMD" alt="banner 图"> <img class="hidden-xs-only hidden-sm-only hidden-md-only" :src="bannerLGXL" alt="banner 图"> </div> <!-- 第一行 --> <el-row> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part"> <router-view name="PartOne"/> </el-col> <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part"> <router-view name="PartTwo"/> </el-col> <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part"> <router-view name="PartThree"/> </el-col> </el-row> <!-- 第二行 --> <el-row> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part"> <router-view name="PartFour"/> </el-col> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="part"> <router-view name="PartFive"/> </el-col> <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part"> <router-view name="PartSix"/> </el-col> <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="part"> <router-view name="PartSeven"/> </el-col> </el-row> </div> </template> <script> export default { name: "App", data() { return { bannerXSSM: require("./assets/img/banner_640.png"), bannerMD: require("./assets/img/banner_1000.png"), bannerLGXL: require("./assets/img/banner.png"), }; } }; </script> <style> body { background: #011128; color: #fff; } .app { width: 100%; } .part { padding: 20px; } .banner img { width: 100%; height: 80px; } p { text-align: center; } </style> 复制代码
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: '<App/>' }) 复制代码
PartOne.vue ( PartTwo 及其他 6 个文件雷同)
<template> <div class="part-one"> <p>第一部分</p> </div> </template> <script> export default { name: "partOne" }; </script> <style scoped> .part-one { width: 100%; height: 500px; border: 15px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } </style> 复制代码
这样,我们就成功完成了高尚的切图仔工作,可以继续下一步咯:
为了防止小伙伴们晕乎,保险起见 jsliang 将总体配置的代码提交到了分支,需要的小伙伴直接下载即可:
四 分步实现
提问:简历一般有什么内容?
回答:
- 基本信息:姓名、工作年限、学历、格言、年龄、联系电话、电子邮箱、GitHub、掘金……
- 求职意向:职位、城市、薪资、准备入职时间……
- 工作经验:……
- 个人技能:熟悉 HTML5、CSS3、JavaScript……
- 教育背景/荣誉证书(这两样没有很出彩的地方的话, jsliang 建议就忽略不写了)
所以,我们就着这几方面来编写我们的简历吧~
4.1 part1 - 基本信息
话不多说,先上代码:
PartOne.vue
<template> <div class="part-one"> <img class="part-one-image" :src="headImage" alt="头像"> <p>姓 名:梁峻荣</p> <p>学 历:本科</p> <p>工作年限:1 年</p> <p>年 龄:23</p> <p>联系电话:18818881888</p> <p>电子邮箱:1741020489@qq.com</p> <p>博 客:<a href="http://jsliang.top">jsliang.top</a></p> <p>掘 金:<a href="https://juejin.im/user/584613ba128fe10058b3cf68">jsliang</a></p> <p>GitHub:<a href="https://github.com/LiangJunrong">LiangJunrong</a></p> </div> </template> <script> export default { name: "partOne", data() { return { headImage: require('../assets/img/head_image.png') } } }; </script> <style scoped> a { color: deepskyblue; } a:hover { color: rgb(118, 190, 248); } p { line-height: 30px; } .part-one { width: 100%; height: 500px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; padding-left: 10px; } .part-one-image { width: 150px; height: 150px; } </style> 复制代码
实现效果:
如上,这只是个简单的信息填充,就不多说了。
4.2 part2 - 好友分布
话不多说,先上代码:
PartTwo.vue
<template> <div class="part-two" id="part-two"></div> </template> <script> // 引入基本模板 let echarts = require("echarts/lib/echarts"); // 引用中国地图 require("echarts/map/js/china.js"); export default { name: "partTwo", data() { return {}; }, mounted() { this.drawECharts(); }, methods: { drawECharts() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById("part-two")); // 排行前五城市 let myFirendCity = [ { name: "广州", value: ["113.23", "23.16", "9"] }, { name: "深圳", value: ["114.07", "22.62", "12"] }, { name: "上海", value: ["121.48", "31.22", "10"] }, { name: "西安", value: ["108.95", "34.27", "4"] }, { name: "北京", value: ["116.46", "39.92", "12"] }, ]; // 好友分布省份 let myFriendProvince = [ { name: "山东", value: 1 }, { name: "四川", value: 1 }, { name: "广东", value: 21 }, { name: "广西", value: 1 }, { name: "北京", value: 12 }, { name: "甘肃", value: 1 }, { name: "上海", value: 10 }, { 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 } ]; myChart.setOption({ // 标题 title: { text: "前端好友分布", textStyle: { color: "#fff" }, subtext: "微信统计", subtextStyle: { color: "#fff" }, x: "center" }, // 移动显示 tooltip: { trigger: "item", // 鼠标移动过去显示 formatter: function(params) { if (params.value[2] == undefined) { if(!params.name) { return "该地区暂无好友"; } else { return params.name + " : " + params.value; } } else { return params.name + " : " + params.value[2]; } } }, // 左边注记 visualMap: { text: ["", "好友数"], min: 0, max: 30, // 是否能通过手柄显示 calculable: true, inRange: { color: ["#e4e004", "#ff5506", "#ff0000"] }, textStyle: { color: "#fff" } }, // geo geo: { map: "china" }, // 数据 series: [ // 排行前五城市 { name: "排行前五", type: "effectScatter", coordinateSystem: "geo", symbolSize: function(val) { return val[2] * 2; }, showEffectOn: "render", rippleEffect: { brushType: "stroke" }, hoverAnimation: true, label: { normal: { formatter: "{b}", position: "right", show: true, color: "#fff" } }, itemStyle: { normal: { color: "#ddb926", shadowBlur: 10, shadowColor: "#333" } }, // 类似于 z-index zlevel: 1, data: myFirendCity, }, // 好友分布省份 { name: "好友数", type: "map", mapType: "china", // 是否允许缩放 roam: false, label: { // 显示省份标签 normal: { formatter: myFirendCity, show: false, textStyle: { color: "#fff" } }, // 对应的鼠标悬浮效果 emphasis: { show: false } }, itemStyle: { normal: { borderWidth: 0.5, // 区域边框宽度 borderColor: "#fff", // 区域边框颜色 areaColor: "deepskyblue" // 区域颜色 }, // 对应的鼠标悬浮效果 emphasis: { borderWidth: 1, borderColor: "#fff", areaColor: "#00aeff" } }, // 数据 data: myFriendProvince } ] }); } } }; </script> <style scoped> .part-two { width: 100%; height: 500px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } </style> 复制代码
实现效果:
首先,我们引用了 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 配置。
4.3 part3 - 技能特长
说到简历,还记得之前看过一份,印象特深,因为人家就是用 Word 中用图表展示的。所以,咱也试试:
PartThree.vue
<template> <div class="part-three" id="part-three"></div> </template> <script> // 引入基本模板 let echarts = require("echarts/lib/echarts"); export default { name: "partThree", data() { return {}; }, mounted() { this.drawECharts(); }, methods: { drawECharts() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById("part-three")); myChart.setOption({ // 标题 title: { // 标题文本 text: "技能分布图", // 标题样式 textStyle: { color: "#fff" }, // 标题位置 x: "center" }, // 移动显示 tooltip: { trigger: "item", // 显示文字样式 formatter: "{a} <br/>{b} : {d}%" }, // 注记 legend: { x: "center", y: "bottom", textStyle: { color: "#fff" }, data: [ "HTML5", "CSS3", "JavaScript", "jQuery", "Vue", "Node", "微信小程序", "其他" ] }, // 注记显示手柄 calculable: true, // 图形系列 series: [ { name: "技能分布", type: "pie", radius: [30, 110], roseType: "area", data: [ { value: 15, name: "HTML5" }, { value: 15, name: "CSS3" }, { value: 20, name: "JavaScript" }, { value: 20, name: "jQuery" }, { value: 20, name: "Vue" }, { value: 15, name: "Node" }, { value: 25, name: "微信小程序" }, { value: 15, name: "其他" } ] } ], // 颜色调整 color: ['#00bfff', '#00ffdd', '#207ffc', '#00aeff', "#00eeff", "#006eff", "#0099ff", "#0066ff"] }); } } }; </script> <style scoped> .part-three { width: 100%; height: 500px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } </style> 复制代码
如上,我们就设置好了:
4.4 part4 - 文章成就
有时候就是想偷懒,也想不起自己还有啥好吹水的了,于是贴个自己的前端文档库的成就吧:
PartFour.vue
<template> <div class="part-four" id="part-four"></div> </template> <script> // 引入基本模板 let echarts = require("echarts/lib/echarts"); export default { name: "partFour", data() { return {}; }, mounted() { this.drawECharts(); }, methods: { drawECharts() { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById("part-four")); myChart.setOption({ // 标题 title: { // 标题文本 text: "文章成就统计", // 标题文本样式 textStyle: { color: "#fff" }, // 标题位置 x: "center" }, // 图形布局 grid: { // 距离底部高度 bottom: "20" }, // 横轴 xAxis: { show: false, type: "category", data: ["Github 提交:\n1141", "Github Star数:\n269", "掘金点赞量:\n1508", "掘金关注者:\n234"], axisLine: { lineStyle: { color: "#fff" } }, axisLabel: { // 横轴信息全部显示 interval: 0 } }, // 纵轴 yAxis: { type: "value", axisLine: { lineStyle: { color: "#fff" } }, axisLabel: { // 横轴信息全部显示 interval: 0 } }, // 图形系列 series: [ { // 图类型 type: "bar", // 数据 data: [1141, 269, 1508, 234], // 文本 label: { show: true, position: "top", color: "#fff", formatter: "{b}" }, // 柱条样式 itemStyle: { color: "deepskyblue" }, zlevel: 1 } ] }); } } }; </script> <style scoped> .part-four { width: 100%; height: 310px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } </style> 复制代码
4.5 part5 - 前端研发
简历一大重点,就是工作经验啦:
PartFive.vue
<template> <div :class="partFive"> <h3 class="text-center text-top">工作经验</h3> <p> <a href="javascript:void(0)">广州**科技股份有限公司</a> <span class="text-small">| 2018/05 - 至今</span> </p> <p class="text-small">工作内容:日常操作 jQuery 编写活动页、微信小程序、Vue + ECharts 报表制作……</p> <p class="text-small">项目成就:</p> <p class="text-small"> 1. 企业宝小程序。使用原生代码进行微信小程序的开发,代码已完成,尚在审核,尚未上线。</p> <p class="text-small"> 2. ECharts 报表汇总。使用 Vue + ECharts 进行报表设计,正在开发。</p> <p class="text-small"> 3. jQuery 活动页及 H5 活动页。</p> </div> </template> <script> export default { name: "partFive", data() { return { partFive: "part-five", curWidth: 0 }; }, beforeMount() { this.curWidth = document.documentElement.clientWidth || document.body.clientWidth; if(this.curWidth < 1000) { this.partFive = "part-five-responsive" } } }; </script> <style scoped> a { color: deepskyblue; } a:hover { color: rgb(118, 190, 248); } .part-five { width: 100%; height: 310px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .part-five-responsive { width: 100%; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .text-center { text-align: center; } .text-small { font-size: 0.9em; color: rgb(253, 239, 239); } </style> 复制代码
结果显示为:
4.6 part6 - 编程技能
除了工作经验,我们还需要 show 一下我们的编程技能都有什么:
PartSix.vue
<template> <div :class="partSix"> <h3 class="text-center">编程技能</h3> <p class="font-small"><span class="font-bold">前端:</span>HTML/HTML5、CSS/CSS3、JS/ES6、jQuery、Vue、微信小程序……</p> <p class="font-small"><span class="font-bold">后端:</span>Node、PHP</p> <p class="font-small"><span class="font-bold">其他:</span>MongoDB、 MySQL 、Sqlserver</p> </div> </template> <script> export default { name: "partSix", data() { return { partSix: "part-six", curWidth: 0 }; }, beforeMount() { this.curWidth = document.documentElement.clientWidth || document.body.clientWidth; if(this.curWidth < 1000) { this.partSix = "part-six-responsive" } } }; </script> <style scoped> .part-six { width: 100%; height: 310px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .part-six-responsive { width: 100%; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .text-center { text-align: center; } .font-small { font-size: .9em; } .font-bold { font-weight: bold; color: deepskyblue; } </style> 复制代码
成果如下图所示:
4.7 part7 - 求职意向
最后,当然要表明我们的求职意向,好让 HR 小姐姐知道我们想要什么啦~
PartSeven.vue
<template> <div :class="partSeven"> <h3 class="text-center">求职意向</h3> <p class="text-small"><span class="font-bold">期望职位:</span>前端工程师</p> <p class="text-small"><span class="font-bold">工作技能:</span>Vue</p> <p class="text-small"><span class="font-bold">目标城市:</span>广州、深圳、杭州、上海</p> <p class="text-small"><span class="font-bold">期望薪资:</span>10K - 15K</p> <p class="text-small"><span class="font-bold">入职时间:</span>随时入职</p> </div> </template> <script> export default { name: "partSeven", data() { return { partSeven: "part-seven", curWidth: 0 }; }, beforeMount() { this.curWidth = document.documentElement.clientWidth || document.body.clientWidth; if(this.curWidth < 1000) { this.partSeven = "part-sevev-responsive" } } }; </script> <style scoped> .part-seven { width: 100%; height: 310px; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .part-sevev-responsive { width: 100%; border: 40px solid transparent; border-image: url("~@/./assets/img/border_image.png") 30 30 stretch; background: #18202d; } .text-center { text-align: center; } .text-small { font-size: .9em; } .font-bold { text-align: center; color: deepskyblue; } </style> 复制代码
结果如下图所示:
至此,所有代码编写完毕,偷懒的小伙伴可以去下面地址下载所有代码:
五 总结
最后再看下我们的最终成品:
OK,到这里,也是时候将这份成品放到我们的线上啦:
使用 GitHub Pages 和 VuePress 搭建网站
我们只需要搭建个 GitHub Pages 的账号,就可以部署这份在线简历咯~
当然 jsliang 有自己的服务器哈,就没使用 GitHub Pages 了,感兴趣的小伙伴可以跟着上面的文章折腾去~
所以,这篇文章就结束啦!
番外:
哈哈, jsliang 已经 预 感 到 了 :
你的好友喷子小哥上线啦!
- “哇,这样用 ECharts 的吗?还能不能更 low 点?!”
- “哇,Vue 这样写的吗?你懂不懂 Vue?”
- “哇,……”
enm......所以我不管怎么说,都说不过这些大佬的,所以有的评论就不回复啦,哈哈~
最后,在此祝小伙伴们找到更好的工作~
-
小伙伴们如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更精彩文章的动力! GitHub 地址
-
撰文不易,如果文章对小伙伴有帮助,希望小伙伴们给勤劳敲代码、辛苦撰文的 jsliang 进行微信/支付宝打赏,你们的每一次打赏都是最好的鼓励,谢谢~
jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 讲讲如何制作一份出彩的个人简历,我就是靠这份简历拿到鹅厂 offer 的
- ECharts 打造在线个人简历 【升级版】
- java高级程序员如何写好简历,一份优秀的程序员简历是什么样的?
- 实战项目之自动简历
- 简历自述
- 2019 面试系列 - 简历
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
尽在双11:阿里巴巴技术演进与超越
阿里巴巴集团双11技术团队 / 电子工业出版社 / 2017-4 / 79
“双 11”,诞生于杭州,成长于阿里,风行于互联网,成就于新经济,贡献于全世界。 从 2009 年淘宝商城起,双 11 已历经八年。每年的双 11 既是当年的结束,又是走向未来的起点。技术的突破创新,商业模式的更替交互,推动着双 11 迈步向前。 《尽在双11——阿里巴巴技术演进与超越》是迄今唯一由阿里巴巴集团官方出品、全面阐述双 11 八年以来在技术和商业上演进和创新历程的书籍。内容......一起来看看 《尽在双11:阿里巴巴技术演进与超越》 这本书的介绍吧!
Base64 编码/解码
Base64 编码/解码
UNIX 时间戳转换
UNIX 时间戳转换