没想到隔了这么久才来更新。
用vue做简历,不是非常适合,为什么呢。
因为简历没什么数据上的操作,一般都是静态的内容。
不过都说了用Vue来做,也只能强行续命了。
这里是我做好的成品
由于未涉及页面跳转,所以没有vue-router
想要实现如网页中的功能,首先我们要使用fullpage.js插件
这也是jquery的插件之一,
他可以让我们的页面实习全屏滚动效果。
本来式通过 npm 进行安装使用的,结果。。。
3版本需要许可证书,ok,我在网站找了一个以前的,下载下来用。
正式进入正题。
修改app.vue如下
这里我们引用了四个页面(当然,前提我们需要创建四个页面)
由于 a 标签作用于全局,所以未使用scoped
接下来,创建Page1
再src目录下创建Pages文件夹用来存放我们的代码
具体如图:
编辑 创建好 page1.vue —— page4.vue 然后逐个编辑
当然,我是写完一个页面再创的另一个页面。
编辑Page1.vue 代码如下:
再说一句,由于我后来想改为普通的网页文件,为了方便,没有使用需要编码的stylus
Page2.vue ,如下:
教育背景
2016.09 - 2020.06
四川师范大学 本科
影视与传媒学院 数字媒体技术
主修课程
web编程、web3D技术、面向对象程序设计 虚拟现实技术、数据库基础、游戏设计
荣获奖励
国家励志奖学金 一等奖学金 二等奖学金
Page3.vue 代码如下:
实习经历
四川全美 前端工程师
2017.09 - 2018.12
- 负责公司产品的前端页面制作
- 优化代码兼容性
- 前端交互和网页美化
四川全美 前端工程师
2017.09 - 2018.12
- 负责公司产品的前端页面制作
- 优化代码兼容性
- 前端交互和网页美化
四川全美 前端工程师
2017.09 - 2018.12
- 负责公司产品的前端页面制作
- 优化代码兼容性
- 前端交互和网页美化
Page4.vue 代码如下:
专业技能
{ {item.name}}
{ {item.pro}}
然后主要的就是这样,下次再讲一些细节。
上面代码运行肯定有错。
ps:未添加相关插件文件!