Vue+Element实现网页版个人简历系统

这篇文章介绍一个使用Vue+Element实现的个人简历系统，主要用到的技术有：vue、element、css3、css定位。

　　作者在window10进行开发，目前只在chrome上进行过测试，没有大的毛病。但是还有很多小功能还不完善，代码也未进行优化，后续会继续完善功能，优化代码。

　　声明：项目相对来说就是一个纯静态页面，代码都比较简单，大佬可闭眼绕过，或者看一眼留下宝贵意见也可

一.项目介绍

　　本项目是一个网页版的个人简历系统，主要使用的技术为vue2+element进行实现。

　　个人简历系统主要包含六个单文件组件：顶部菜单、首页、个人简介、个人技能、工作经历和底部页脚。

　　先来一个动图感受一下：

　　

　　项目目录：

　　

　　下面就来详细介绍一下每个组件。

 

二.顶部菜单

　　

 　　顶部菜单组件为:src\components\menu\TopMenu.vue

1.源代码

<template>
  <!-- components/TopMenu.vue -->
  <div class="menupage">
    <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
      <p class="logo-title"><i class="el-icon-user"></i>JEmbrace</p>
      <el-menu-item index="1" style="margin-left:250px;">首页</el-menu-item>
      <el-menu-item index="2">个人简介</el-menu-item>
      <el-menu-item index="3">个人技能</el-menu-item>
      <el-menu-item index="4">工作经历</el-menu-item>
    </el-menu>
  </div>
</template>
<style>
.menupage{
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 100;
}
.menupage .el-menu.el-menu--horizontal{
  border-bottom: none;
  height: 100px;
  line-height: 100px;
}
.menupage .el-menu.el-menu--horizontal>.el-menu-item,.menupage .el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 100px;
    line-height: 100px;
    padding: 0px 50px;
    font-size: 16px;
    letter-spacing: 4px;
}
.menupage .el-menu--horizontal>.el-menu-item.is-active,.menupage .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
  border-bottom-width: 4px;
}
.menupage .logo-title .el-icon-user{
  margin-right: 5px;
}
</style>
<style scoped>
  .logo-title{
    position: absolute;
    left: 100px;
    top: 0px;
    color:#fff;
    font-size:26px;
    cursor: pointer;
  }
  .logo-title img{
    width: 80px;
    outline:none;
    vertical-align: middle;
  }
</style>
<script>
export default {
  name: 'topMenu',
  data () {
    return {
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      var name = ''
      if (key === '1') name = 'homepage'
      if (key === '4') name = 'productpage'
      if (key === '3') name = 'securityresearch'
      if (key === '2') name = 'aboutus'
      var targetEle = document.querySelector('.' + name)
      var offsetTop = targetEle.offsetTop
      document.documentElement.scrollTop = offsetTop - 150
    }
  }
}
</script>

2.说明

　　菜单

　　菜单的实现使用了element的 NavMenu 导航菜单 组件

　　菜单整体使用了fixed定位，将其固定在浏览器顶部；并且使用z-index设置菜单堆叠在最顶层。

　　图标

　　 图标采用了element的 icon 组件

　　菜单跳转

　　我们点击菜单栏的四个选项，页面会自动滚动到对应的视图。对应的实现的函数是handleSelect函数，该函数作用于 NavMenu 导航菜单 提供的select事件的回调函数。

　　

　　在这里，需要关注的参数为index，它是<el-menu-item>元素设置的index属性值。

　　

　　handleSelect函数根据index参数，可以得知当前激活了那个菜单，然后根据菜单的name值，让滚动条至对应的视图。

//点击菜单栏的选择，自动滚动到对应的视图
handleSelect (index, indexPath) {
      var name = ''
      if (index === '1') name = 'homepage'
      if (index === '4') name = 'productpage'
      if (index === '3') name = 'securityresearch'
      if (index === '2') name = 'aboutus'
      var targetEle = document.querySelector('.' + name)
      var offsetTop = targetEle.offsetTop
      document.documentElement.scrollTop = offsetTop - 150
}

三.首页

　　

　　首页组件为：src\components\home\HomePage.vue

1.源代码

<template>
  <div class='homepage'>
      <div class="content">
          <div class='box' id='box1'></div>
          <div class='box' id='box2'> </div>
          <p>{
 {sign}}</p>
          <div class='box' id='box3'></div>
          <div class='box' id='box4'></div>
      </div>
  </div>
</template>
<style scoped>
  .homepage{
    height: 550px;
    background: url(../../assets/home_bg.jpg) no-repeat;
    background-size: 100% 120%;
    color: #fff;
    font-size: 28px;
    margin-top: 100