Vue + Bootstrap 制作炫酷个人简历（二）

最新推荐文章于 2022-11-07 14:19:05 发布

weixin_30843605

最新推荐文章于 2022-11-07 14:19:05 发布

阅读量1k

点赞数 1

文章标签： javascript 前端数据库 ViewUI

原文链接：http://www.cnblogs.com/tcxq/p/10522817.html

版权

本文介绍如何使用Vue.js和Bootstrap创建一款炫酷的全屏滚动个人简历。虽然Vue对于静态内容的简历并非最佳选择，但作者仍然通过fullpage.js实现了这一效果。文中详细展示了如何设置app.vue，创建并编辑page1.vue到page4.vue，以及在过程中遇到的问题和解决方法。注意，实际运行代码需要添加相关插件文件。

摘要由CSDN通过智能技术生成

没想到隔了这么久才来更新。

用vue做简历，不是非常适合，为什么呢。

因为简历没什么数据上的操作，一般都是静态的内容。

不过都说了用Vue来做，也只能强行续命了。

这里是我做好的成品 非一般简历

由于未涉及页面跳转，所以没有vue-router

想要实现如网页中的功能，首先我们要使用fullpage.js插件

这也是jquery的插件之一，官网地址

他可以让我们的页面实习全屏滚动效果。

本来式通过 npm 进行安装使用的，结果。。。

3版本需要许可证书，ok，我在网站找了一个以前的，下载下来用。

正式进入正题。

修改app.vue如下

<template>
  <div id="app">
    <div id="fullpage">
      <div class="section section1">
        <page1/>
      </div>
      <div class="section section2">
        <page2/>
      </div>
      <div class="section section3">
        <page3/>
      </div>
      <div class="section section4">
        <page4/>
      </div>
    </div>
  </div>
</template>

<script>
import Page1 from './Pages/page1/Page1'
import Page2 from './Pages/page2/Page2'
import Page3 from './Pages/page3/Page3'
import Page4 from './Pages/page4/Page4'
import $ from 'jquery'
import './assets/lib/fullpage/jquery.easings.min.js'
import './assets/lib/fullpage/jquery.fullPage.js'
export default {
  name: 'App',
  components: {
    Page1,
    Page2,
    Page3,
    Page4
  },
  mounted: function () {
    $('#fullpage').fullpage({
      verticalCentered: false,
      anchros: ['page1', 'page2', 'page3', 'page4'],
      navigation: true,
      navigationTooltips: ['首页', '教育背景', '实习经历', '专业技能']
    })
  }
}
</script>

<style>
* {
    
  margin: 0;
  padding: 0;
}
a {
    
  color: #666666;
}
a:active, a:visited {
    
  color: #666666;
  text-decoration: none;
}
a:hover {
    
  color: #6CA6CD;
  text-decoration: none;
}
#fullpage {
    
  background: #F2F2F2;
}
.section {
    
  overflow: hidden;
}
</style>

这里我们引用了四个页面（当然，前提我们需要创建四个页面）

由于 a 标签作用于全局，所以未使用scoped

接下来，创建Page1

再src目录下创建Pages文件夹用来存放我们的代码

具体如图：

编辑创建好 page1.vue —— page4.vue 然后逐个编辑

当然，我是写完一个页面再创的另一个页面。

编辑Page1.vue 代码如下：

<template>
  <div class="container">
    <div class="col-md-4 col-md-offset-4 mycontent" @click.self="hideWeiXin()">
      <div class="img-circle img-content">
        <img src="https://i04piccdn.sogoucdn.com/3c28af542f2d49f7-fe9c78d2ff4ac332-9ce573e288e09eb3de538388d1a831bb_qq" alt="">
      </div>
      <h2 class="text-muted my-nane">YoungAm</h2>
      <h3 class="my-work">前端工程师<a href="" style="color: #666;"><em>-自由职业</em></a></h3>
        <ul class="list-inline my-icon">
          <li><a href="http://www.youngam.cn" style="color: #666;" target="_blank"><span class="iconfont">&#xe65d;</span></a></li>
          <li><a href="https://drunk-poetry.github.io/" style="color: #666;" target="_blank"><span class="iconfont">&#xe600;</span></a></li