简单使用vue实现的单页面demo，希望对大家有帮助！
连接查看地址：https://eight1302.github.io/resume/my_resume/view/resume.html
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/resume.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="shortcut icon" href="free.ico">
<title>FREE履历</title>
</head>
<body>
<div id="resume" class="col-md-12" style="height: 100%;overflow-y: auto;">
<div class="col-md-12 resume" style="padding: 0;height: auto;width: 50%;max-width: 937px;margin-bottom: 40px;">
<section class="col-md-10" style="padding: 0px;padding-bottom: 20px;">
<div class="col-md-2 img" style="padding: 0;">
<img v-bind:src="img" class="one">
</div>
<div class="col-md-10" style="padding: 0;">
<div class="col-md-12 name" style="padding: 0;">
<span style="font-weight: bold;">{{name}}</span>
</div>
<div class="col-md-12 position" style="padding: 0;">
<span class="job">{{job}}</span>
</div>
<div class="col-md-12 " style="padding: 0;">
<ul style="text-align: left;list-style: none;">
<li style="float: left;">
<i class="fa fa-envelope" aria-hidden="true"></i>{{email}}
</li>
<li style="float: left;">
<i class="fa fa-phone" aria-hidden="true"></i> {{phone}}
</li>
<li style="float: left;">
<i class="fa fa-github" aria-hidden="true"></i> <a v-bind:href="github">{{github_name}}</a>
</li>
</ul>
</div>
<div class="col-md-12" style="padding: 0;">
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba">
<i class="fa fa-address-card-o fa-1" style="margin-right: 10px;"></i>{{education_ba}}
</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12">
<div class="col-md-12" v-for="date in education">
<div class="col-md-6 three"><strong>{{date.school}}</strong> {{date.region}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.time}}</div>
<div class="col-md-6 three"><strong>{{date.degree}}</strong> {{date.professional}}</div>
<div class="col-md-6 three" style="text-align: right;"><strong>{{date.course}}</strong></div>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-building fa-1" style="margin-right: 10px;"></i>{{work_experience}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12" v-for="date in work_info">
<div class="col-md-4 three"><strong>{{date.company}}</strong> {{date.region}}</div>
<div class="col-md-4 three" style="text-align: center;">{{date.job_position}}</div>
<div class="col-md-4 three" style="text-align: right;">{{date.times}}</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-users fa-1" style="margin-right: 10px;"></i>{{project_experience}}</span>
<hr style="border-top: 1px solid #161515;" />
</div>
<div class="col-md-12 three" v-for="date in project_info">
<div class="col-md-12 three"><strong>{{date.projuct_name}}</strong></div>
<div class="col-md-6 three"><strong>{{date.name}}</strong> {{date.job_position}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.times}}</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info" v-for="date in date.values">
<li>{{date.info}}</li>
</ul>
</div>
<div class="col-md-12 three">
<span>{{date.describe}}</span>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="user-o education_ba"><i class="fa fa-user-circle-o fa-1" style="margin-right: 10px;"></i>{{person_product}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three" v-for="date in person_info">
<div class="col-md-6 three"><strong>{{date.name}}</strong> {{date.job_position}}</div>
<div class="col-md-6 three" style="text-align: right;">{{date.times}}</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info">
<li>{{date.info}}</li>
</ul>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-tags fa-1" style="margin-right: 10px;"></i>{{skills}}</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three">
<div class="col-md-6" v-for="date in skills_info">
<span><strong>{{date.name}} : </strong>{{date.language}}</span>
</div>
</div>
</section>
<section class="col-md-12" style="padding: 0;height: auto;">
<div class="education">
<span class="education_ba"><i class="fa fa-diamond fa-1" style="margin-right: 10px;"></i>其他</span>
<hr / style="border-top: 1px solid #161515;">
</div>
<div class="col-md-12 three" style="text-align: left;">
<ul class="info" v-for="date in other_list">
<li><strong>{{date.name}} : </strong><a href="https://github.com/eight1302/">{{date.language}}</a></li>
</ul>
</div>
</section>
</div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/react_resune.js"></script>
</html>
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 : '性格开朗，喜欢学习专研以及技术总结',
}
]
}
})
