Nuxt.js 个人简历网站

简介

本章将介绍如何使用 Nuxt.js 创建一个功能完善的个人简历网站。我们将涵盖从项目初始化到部署的全过程，包括页面结构、样式设计、交互功能等各个方面。通过本章的学习，你将能够掌握如何利用 Nuxt.js 来构建一个专业的个人简历网站。

项目初始化

安装 Node.js 和 Vue CLI

在开始之前，请确保你的机器上已经安装了 Node.js。Node.js 包含了 npm（Node 包管理器），我们可以使用它来安装 Vue CLI（Vue 命令行工具）。

# 安装 Vue CLI
npm install -g @vue/cli

创建 Nuxt.js 项目

使用 Vue CLI 创建一个新的 Nuxt.js 项目非常简单。打开终端，运行以下命令：

# 创建一个新的 Nuxt.js 项目
vue create resume-website --preset nuxt-community/starter-template

项目结构

创建完成后，你将看到如下所示的文件和目录结构：

// www.javascriptcn.com code example
resume-website/
├── assets/                # 静态资源
│   ├── css/               # CSS 文件
│   └── fonts/             # 字体文件
├── components/            # 自定义组件
├── layouts/               # 布局文件
├── middleware/            # 中间件
├── pages/                 # 页面
├── plugins/               # 插件
├── static/                # 静态资源
├── store/                 # Vuex 存储
├── .nuxt/                 # 构建输出文件
├── nuxt.config.js         # Nuxt.js 配置文件
└── package.json           # 项目配置文件

页面设计

主页

主页是用户访问网站时首先看到的页面。我们将在这个页面中展示个人信息、技能、工作经验等。

添加个人简介

在 pages/index.vue 文件中，添加以下代码：

// www.javascriptcn.com code example
<template>
  <div class="home">
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">张三的个人简历</h1>
          <h2 class="subtitle">前端开发工程师</h2>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="content">
          <p>这里是您的个人简介。</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.hero {
  margin-bottom: 2rem;
}
.content p {
  font-size: 1.5rem;
  line-height: 1.6;
}
</style>

技能页面

接下来，我们创建一个技能页面，用于展示您的专业技能。

创建技能页面文件

在 pages/skills.vue 文件中，添加以下代码：

// www.javascriptcn.com code example
<template>
  <div class="skills">
    <section class="section">
      <div class="container">
        <h1 class="title">我的技能</h1>
        <div class="columns">
          <div class="column is-one-third">
            <div class="box">
              <h2 class="subtitle">HTML/CSS</h2>
              <progress class="progress is-primary" value="90" max="100">90%</progress>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="box">
              <h2 class="subtitle">JavaScript</h2>
              <progress class="progress is-primary" value="85" max="100">85%</progress>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="box">
              <h2 class="subtitle">Vue.js</h2>
              <progress class="progress is-primary" value="80" max="100">80%</progress>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.box {
  padding: 1rem;
}
.subtitle {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
</style>

工作经验页面

接下来，我们创建一个工作经验页面，用于展示您的工作经历。

创建工作经验页面文件

在 pages/experience.vue 文件中，添加以下代码：

// www.javascriptcn.com code example
<template>
  <div class="experience">
    <section class="section">
      <div class="container">
        <h1 class="title">我的工作经验</h1>
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-marker is-primary"></div>
            <div class="timeline-content">
              <h2 class="title">前端开发工程师</h2>
              <h3 class="subtitle">ABC 公司 - 2020 年 1 月 至今</h3>
              <p>负责前端项目的开发与维护，使用 Vue.js 和 Nuxt.js 技术栈。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-marker is-primary"></div>
            <div class="timeline-content">
              <h2 class="title">实习生</h2>
              <h3 class="subtitle">XYZ 公司 - 2019 年 7 月 至 2020 年 1 月</h3>
              <p>参与公司内部前端项目，学习并实践了前端开发的最佳实践。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.timeline {
  list-style-type: none;
  padding-left: 0;
}
.timeline-item {
  margin-bottom: 1rem;
}
.timeline-content {
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}
.timeline-content h2 {
  margin-top: 0;
}
</style>

样式设计

引入第三方样式库

为了使我们的网站看起来更加美观，我们将引入一些流行的 CSS 框架，如 Bulma 或 Tailwind CSS。

安装 Bulma

使用 npm 安装 Bulma：

npm install bulma

引入 Bulma

在 assets/css/main.css 文件中，添加以下代码：

// www.javascriptcn.com code example
@import '~bulma/css/bulma.min.css';

body {
  font-family: 'Roboto', sans-serif;
}

.hero {
  background-color: #4a90e2;
  color: white;
}

.title, .subtitle {
  text-align: center;
}

在 nuxt.config.js 文件中，添加以下配置以引入自定义样式：

export default {
  css: [
    '@/assets/css/main.css'
  ]
}

路由配置

Nuxt.js 提供了自动路由功能，你只需要按照约定的文件夹结构创建相应的 .vue 文件即可。例如，我们在 pages 文件夹下创建了一个 index.vue 文件，Nuxt.js 就会自动为这个页面生成一个根路径的路由。

如果你需要更复杂的路由配置，可以在 nuxt.config.js 文件中手动配置路由规则。例如：

// www.javascriptcn.com code example
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/index.vue')
      })
    }
  }
}

交互功能

添加联系表单

为了方便用户联系您，我们将在网站底部添加一个简单的联系表单。

创建联系表单组件

在 components/ContactForm.vue 文件中，添加以下代码：

// www.javascriptcn.com code example
<template>
  <form @submit.prevent="handleSubmit">
    <div class="field">
      <label class="label">姓名</label>
      <div class="control">
        <input class="input" type="text" v-model="name" placeholder="请输入您的姓名" required>
      </div>
    </div>
    <div class="field">
      <label class="label">邮箱</label>
      <div class="control">
        <input class="input" type="email" v-model="email" placeholder="请输入您的邮箱" required>
      </div>
    </div>
    <div class="field">
      <label class="label">消息</label>
      <div class="control">
        <textarea class="textarea" v-model="message" placeholder="请输入您的消息" required></textarea>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button class="button is-primary">发送消息</button>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      message: ''
    }
  },
  methods: {
    handleSubmit() {
      // 在这里处理表单提交逻辑
      alert('感谢您的留言！')
      this.name = ''
      this.email = ''
      this.message = ''
    }
  }
}
</script>

<style scoped>
.field {
  margin-bottom: 1rem;
}
.button {
  width: 100%;
}
</style>

在主页中使用联系表单组件

在 pages/index.vue 文件中，添加以下代码：

// www.javascriptcn.com code example
<template>
  <div class="home">
    <!-- ... 其他代码 ... -->
    <section class="section">
      <div class="container">
        <h1 class="title">联系我们</h1>
        <contact-form />
      </div>
    </section>
  </div>
</template>

<script>
import ContactForm from '~/components/ContactForm.vue'

export default {
  components: {
    ContactForm
  }
}
</script>

部署

使用 Netlify 部署

Netlify 是一个强大的静态站点托管平台，支持自动部署。以下是使用 Netlify 部署的步骤：

1. 注册并登录 Netlify 账户。
2. 在 Netlify 控制台中点击 "New site from Git"。
3. 选择你的代码仓库（例如 GitHub）。
4. 按照向导完成部署设置。对于 Nuxt.js 项目，通常选择 "Use settings from _redirects or netlify.toml" 作为构建命令。
5. 点击 "Deploy site" 开始部署。

使用 Vercel 部署

Vercel 是另一个流行的静态站点托管平台，同样支持自动部署。以下是使用 Vercel 部署的步骤：

1. 注册并登录 Vercel 账户。
2. 在 Vercel 控制台中点击 "Import project"。
3. 选择你的代码仓库（例如 GitHub）。
4. 按照向导完成部署设置。对于 Nuxt.js 项目，通常选择 "Next.js" 作为框架类型，并填写相应的构建命令。
5. 点击 "Deploy" 开始部署。

通过以上步骤，你就可以成功地使用 Nuxt.js 创建一个功能完善的个人简历网站，并将其部署到互联网上。希望你在本章的学习中有所收获，祝你创作出令人印象深刻的个人简历网站！