使用VUE做的个人简历
简单使用vue实现的单页面demo，希望对大家有帮助！
连接查看地址：https://eight1302.github.io/my_resume/my_resume/view/resume.html
html部分
{{education_ba}}
{{work_experience}}
{{project_experience}}
- {{date.info}}
{{date.describe}}
{{person_product}}
- {{date.info}}
{{skills}}
{{date.name}} : {{date.language}}
其他
css部分：
html, body {
background: url(../view/timg.jpg) no-repeat center center fixed;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: -webkit-paged-x;
}
.resume{
margin-left: 25%;
margin-top: 20px;
background: #fff;
padding: 0;
}
.header{
height: 100px;
}
.img{
width: 100px;
height: 135px;
padding: 0;
margin: auto;
}
.one{
width: 100px;
height: 135px;
margin-left: 10px;
margin-top: 20px;
}
.two{
padding: 0;
}
.name{
text-align: center;
font-size: 30px;
/* height: 90px; */
margin-top: 57px;
font-family: cursive;
}
.position{
height: 20px;
line-height: 20px;
font-family: cursive;
text-align: right;
}
ul{
width: 500px;
margin: auto;
}
ul>li{
margin-right: 30px;
}
.info{
width: 100%;
}
.job{
margin-right: 150px;
font-size: 17px;
margin-right: 62px;
font-size: 17px;
color: #000;
font-family: serif;
}
.education{
}
.education_ba{
font-size: 19px;
font-family: fantasy;
margin-left: 20px;
font-weight: bold;
color: #666666;
}
.three{
text-align: left;
font-family: "Roboto Condensed", Arial, sans-serif;
background-color: #fff;
font-size: 15px;
line-height: 24px;
color: #666666;
font-weight: 300;
}
.education {
margin-top: 15px;
}
vuejs部分：
new Vue({
el: '#resume',
data: {
img : '',
name: '杨有生',
email: '',
phone: '',
github : '',
github_name : '',
job : '求职意向：C语言高级工程师',
education_ba : '教育背景',
education : [{
school : '',
region : '',
time : '2013-2017',
degree : '学士',
professional : '',
course : '本科',
}],
work_experience : '工作经历',
work_info : [
{
id : '1',
company : '北京创元成业科技有限公司',
region : '北京',
job_position : 'Web前端初级工程师',
times : '2017.10~至今',
},
{
id : '2',
company : '北京匡恩网络科技有限责任公司',
region : '北京',
job_position : 'Web前端初级工程师',
times : '2016.10~2017.4',
},
],
project_experience : '项目经历',
project_info : [
{
id : '1',
projuct_name : '企业项目',
name : '创元生产平台',
job_position : 'Web前端开发',
times : '2017.2~至今',
values : [{
info : '运用BootStrap/JQuery/jsp',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS前端模块化',
},{
info : '运用echartjs实现数据可视化',
}],
describe : '对客户新增的产品进行专业的维护以及报价、支付凭证审核、对于合同的不同类型的产品进行生产流程分配。',
},
{
id : '2',
projuct_name : '企业项目',
name : '客户下单平台',
job_position : 'Web前端开发',
times : '2017.10~2017.12',
values : [{
info : '运用BootStrap/JQuery',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '运用echartjs实现数据可视化',
}],
describe : '推广公司生产的单片机产品，解决公司传统的接单方式，通过客户注册，添加客户需要的产品详细信息以及生产相关的文件，客户对自己添加的产品进行下单生成合同，创元成业公司接单生产，对客户的合同需生产的产品进行报价、用户上传支付凭证等以及售后服务。',
},
{
id : '3',
projuct_name : '商业项目',
name : '工控安全卫士',
job_position : 'Web前端开发',
times : '2017.1~2017.4',
values : [{
info : '运用BootStrap/JQuery/css3',
},{
info : '自定义组件',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS前端模块化',
},{
info : '运用echartjs/gojs实现数据可视化',
}],
describe : '类似杀毒软件网络安全管理',
},
{
id : '4',
projuct_name : '商业项目',
name : '工控卫士集中管理平台',
job_position : 'Web前端开发',
times : '2016.10~2017.1',
values : [{
info : '运用angular框架',
},{
info : '自定义组件',
},{
info : '采用前后端分离',
},{
info : '采用JSON/AJAX数据交互',
},{
info : '采用RequreJS/NodeJS前端模块化',
},{
info : '开发过程中解决了很多问题，如跨域问题等',
}],
describe : '针对传统的工业进行网络安全管理',
}
],
person_product : '个人项目',
person_info : [
{
id : '1',
name : '我的个人博客',
job_position : '全站开发',
times : '2017.2~至今',
info : '使用JQuery/Javascript/NodeJS/vue/mongodb',
},
{
id : '2',
name : '终端管理系统(毕业设计)',
job_position : '全站开发',
times : '2017.1~2017.6',
info : '使用JQuery/Javascript/PHP/MySql',
},
{
id : '3',
name : '在线商城 ',
job_position : '全站开发',
times : '2016.4~2016.6',
info : '使用JQuery/Javascript/java/jsp/MySql',
},
{
id : '4',
name : '多用户留言系统',
job_position : '全站开发',
times : '2015.11~2016.4',
info : '使用JQuery/Javascript/PHP/MySql',
},
{
id : '5',
name : 'CMS内容管理系统',
job_position : '全站开发',
times : '2015.5~2015.10',
info : '使用JQuery/Javascript/PHP/MySql',
}
],
skills : '技能',
skills_info : [
{
id : '1',
name : '语言',
language : 'C语言',
},
{
id : '2',
name : '其他',
language : 'HTTP/JSP(技术)',
},
{
id : '3',
name : '框架',
language : 'Jquery/Bootstrap/vue/angular',
},
{
id : '4',
name : '数据库',
language : 'MySql/MongoDB',
},
{
id : '5',
name : '前端工具 ',
language : 'webpack',
},
{
id : '6',
name : '版本管理 ',
language : 'git',
}
],
other : '其他',
other_list : [
{
id : '1',
name : 'github',
language : '',
},
{
id : '2',
name : 'CSDN博客',
language : '',
},
{
id : '3',
name : '个人描述',
language : '性格开朗，喜欢学习专研以及技术总结',
}
]
}
})
