Vue+Element实现网页版个人简历系统(推荐)-前端开发

下面我会详细讲解“Vue+Element实现网页版个人简历系统(推荐)”的完整攻略。

下面我会详细讲解“Vue+Element实现网页版个人简历系统(推荐)”的完整攻略。

1. 项目背景

在现代社会，网站成为人们获取信息和展示自我个性的重要平台之一，其中个人简历网站更是放射个人品牌的一个重要方面。因此，制作一个美观、高效的个人简历网站是至关重要的事情。

Vue是当前前端开发非常流行的JavaScript框架，Vue框架以其“轻量、快速、易用”的特性成为了前端开发中的热门选择。Element UI则是基于Vue框架的一套基于Vue 2.0的PC端UI框架。

这里我们将使用Vue和Element UI来开发一个个人简历网站，以展示我们的个人技能和经验。

2. 环境搭建

在开始前，我们需要构建开发环境，包括安装Vue CLI（用来创建Vue项目的脚手架工具）、Node.js（用来运行JavaScript代码的运行环境）和npm（用来管理依赖模块的JavaScript包管理器）。

具体的安装步骤可以参考以下链接：

Vue CLI安装：https://cli.vuejs.org/zh/guide/installation.html
Node.js安装：https://nodejs.org/zh-cn/download/
npm安装：https://www.npmjs.com/get-npm

在安装完成后，我们可以在命令行中输入以下命令来检查Vue CLI和npm是否已经正确安装：

vue --version
npm --version

3. 创建Vue项目

接下来，我们可以使用Vue CLI来创建一个新的Vue项目。

在命令行中输入以下命令：

vue create resume

其中，resume是项目的名称，你可以根据自己的实际需要来命名。

在项目创建过程中，Vue CLI会询问我们需要添加哪些功能和插件。我们需要选择以下配置项：

Babel：用来将ES6+语法转换成浏览器兼容的ES5语法。
Router：用来添加路由管理功能。
Vuex：用来添加状态管理功能。
CSS预处理器：根据自己的习惯选择。
Linter / Formatter：选择默认配置即可。

待项目创建完成后，我们可以进入项目所在目录，并在命令行中输入以下命令来运行项目：

cd resume
npm run serve

然后在浏览器中访问http://localhost:8080，即可看到项目已经成功运行。

4. 引入Element UI

在项目中使用Element UI非常方便，我们只需要在项目中引入Element UI的CSS和JS文件，即可直接使用其中的组件和样式。

在命令行中输入以下命令安装Element UI：

npm i element-ui -S

然后在项目入口文件main.js中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

这里我们使用ES6的import语法来引入Element UI，并使用Vue插件机制注册Element UI。

5. 开发个人简历网站

接下来我们就可以开始开发我们的个人简历网站了。在这里，我们将使用如下目录结构：

resume
|-src
  |-views
    |-Home.vue       // 首页视图
    |-Resume.vue     // 简历视图
  |-router
    |-index.js       // 路由配置文件
  |-App.vue          // 应用主视图文件
  |-main.js          // 应用入口文件

5.1 首页视图

首先，我们需要开发一个首页视图，用来展示我们的个人信息和技能。

在src/views目录下，创建一个Home.vue文件，并编写如下代码：

<template>
  <div class="home-container">
    <h1>{{ name }}</h1>
    <h3>{{ title }}</h3>
    <div class="skill-container">
      <el-tag v-for="skill in skills" :key="skill" :size="size">{{ skill }}</el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      name: '张三',
      title: '前端工程师',
      skills: ['HTML5', 'CSS3', 'Vue.js', 'Element UI'],
      size: 'medium'
    }
  }
}
</script>

<style scoped>
.home-container {
  text-align: center;
}

.skill-container {
  margin-top: 20px;
}
</style>

这里我们使用了Element UI中的el-tag标签来展示技能列表，使用v-for指令循环渲染技能列表，传递了size属性来设置标签的大小。同时，我们也使用了Vue的模板语法来动态地展示个人信息和技能。

5.2 简历视图

接下来，我们需要开发一个简历视图，用来展示我们的教育和工作经历。

在src/views目录下，创建一个Resume.vue文件，并编写如下代码：

<template>
  <div class="resume-container">
    <h2>教育经历</h2>
    <div class="education-container">
      <el-timeline :reverse="reverse">
        <el-timeline-item timestamp="2010-09-01 00:00:00">本科（计算机科学与技术）</el-timeline-item>
        <el-timeline-item timestamp="2014-06-01 00:00:00">硕士（软件工程）</el-timeline-item>
      </el-timeline>
    </div>
    <h2>工作经历</h2>
    <div class="work-container">
      <el-timeline :reverse="reverse">
        <el-timeline-item timestamp="2014-06-01 00:00:00">前端工程师（ABC公司）</el-timeline-item>
        <el-timeline-item timestamp="2017-03-01 00:00:00">高级前端工程师（DEF公司）</el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Resume',
  data () {
    return {
      reverse: false
    }
  }
}
</script>

<style scoped>
.resume-container {
  margin-top: 50px;
}

.education-container {
  margin-top: 20px;
}

.work-container {
  margin-top: 50px;
}
</style>

这里我们使用了Element UI中的el-timeline组件来展示教育和工作经历，使用el-timeline-item标签来展示具体信息，并使用reverse属性来控制时间线的方向。同时，我们也使用了Vue的模板语法来动态地展示个人信息和经历。

5.3 路由配置

最后，我们需要在src/router/index.js文件中配置路由，来实现在首页和简历视图之间进行跳转的功能。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Resume from '@/views/Resume.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/resume',
    name: 'Resume',
    component: Resume
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这里我们使用了Vue Router的核心方法Vue.use()来注册Router插件，使用routes数组配置路由。在routes数组中，我们将根路径/指向了首页视图Home组件，将/resume路径指向了简历视图Resume组件。同时，我们也使用了history模式，来去除URL中默认的#符号。

6. 项目打包和部署

在开发完成后，我们需要将项目进行打包，并将打包后的文件部署到服务器上。

在命令行中输入以下命令，来进行项目打包：

npm run build

打包完成后，会在项目根目录下生成一个dist文件夹，里面包含了打包后的所有文件。将这些文件部署到服务器上即可。

示例说明

这里我提供两个示例来说明本项目的实现思路和使用方法。

示例1：展示个人技能

在Home.vue组件中，我们使用了Element UI的el-tag组件来展示个人技能列表。我们可以通过在data选项中设置skills属性，来添加或删除技能。

<el-tag v-for="skill in skills" :key="skill" :size="size">{{ skill }}</el-tag>

同时，我们也可以通过修改size属性来改变标签的大小。

<el-tag v-for="skill in skills" :key="skill" :size="size">{{ skill }}</el-tag>

示例2：添加新的工作经历

在Resume.vue组件中，我们使用了Element UI的el-timeline组件来展示教育和工作经历。我们可以通过在el-timeline-item标签中添加新的时间和内容，来添加新的工作经历。

<el-timeline :reverse="reverse">
  <el-timeline-item timestamp="2014-06-01 00:00:00">前端工程师（ABC公司）</el-timeline-item>
  <el-timeline-item timestamp="2017-03-01 00:00:00">高级前端工程师（DEF公司）</el-timeline-item>
  <el-timeline-item timestamp="2020-06-01 00:00:00">资深前端工程师（GHI公司）</el-timeline-item>
</el-timeline>