使用 Vue3 实现个人简历生成器

使用 Vue3 实现个人简历生成器

随着互联网的蓬勃发展，越来越多的求职者开始重视个人简历的设计与美观。一个个性化且精美的简历往往能在众多求职者中脱颖而出。为了帮助大家快速创建个人简历，我决定使用 Vue3 来实现一个简单的个人简历生成器。在这个示例中，用户可以动态填写信息，并生成 PDF 格式的简历。接下来，我们将一同探索这个项目的实现过程。

项目准备

在开始之前，确保您已经安装了 Node.js 和 Vue CLI。可以通过以下命令来安装 Vue CLI：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create resume-generator

进入项目目录，并安装必要的依赖：

cd resume-generator
npm install html2canvas jsPDF

• html2canvas：用于将 HTML 内容转为 Canvas 图像。
• jsPDF：用于将 Canvas 转换为 PDF 格式。

项目结构

以下是我们项目的大致结构：

src
├── assets
├── components
│   ├── FormInput.vue
│   └── Resume.vue
├── App.vue
└── main.js

创建组件

在 components 文件夹中，我们将创建两个组件：

1. FormInput.vue：用于用户输入个人信息。
2. Resume.vue：用于显示生成的简历。

1. FormInput.vue

首先，我们创建 FormInput.vue，该组件将使用 v-model 来双向绑定用户输入的数据。

<template>
  <div>
    <h2>填写您的个人信息</h2>
    <form @submit.prevent="submit">
      <input v-model="name" type="text" placeholder="姓名" required />
      <input v-model="email" type="email" placeholder="邮箱" required />
      <input v-model="phone" type="text" placeholder="电话" required />
      <textarea v-model="bio" placeholder="个人简介" required></textarea>
      <button type="submit">生成简历</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');
const email = ref('');
const phone = ref('');
const bio = ref('');

const submit = () => {
  const resumeData = {
    name: name.value,
    email: email.value,
    phone: phone.value,
    bio: bio.value
  };
  
  // 触发父组件的生成简历事件
  emit('generate', resumeData);
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
}
input, textarea {
  margin: 0.5em 0;
}
</style>

2. Resume.vue

接下来，我们创建 Resume.vue，该组件将接收个人信息并展示。

<template>
  <div id="resume">
    <h1>{{ resume.name }}</h1>
    <p>{{ resume.email }}</p>
    <p>{{ resume.phone }}</p>
    <p>{{ resume.bio }}</p>
    <button @click="generatePDF">下载简历</button>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const props = defineProps(['resume']);

const generatePDF = () => {
  const element = document.getElementById('resume');
  
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('resume.pdf');
  });
};
</script>

<style scoped>
#resume {
  font-family: 'Arial, sans-serif';
  padding: 20px;
}
</style>

整合所有组件

现在，我们需要在 App.vue 中整合这两个组件。

<template>
  <div id="app">
    <FormInput @generate="updateResume" />
    <Resume v-if="resume" :resume="resume" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FormInput from './components/FormInput.vue';
import Resume from './components/Resume.vue';

const resume = ref(null);

const updateResume = (data) => {
  resume.value = data;
};
</script>

<style>
#app {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
</style>

启动项目

至此，我们的个人简历生成器已经基本完成。您可以通过以下命令来启动项目：

npm run serve

打开浏览器，访问 http://localhost:8080/（或提供的 URL），您将看到一个允许用户输入信息的表单。填写完毕后单击“生成简历”按钮，即可在下方生成简历的预览，并可以下载 PDF 文件。

总结

通过使用 Vue3，我们成功创建了一个简洁易用的个人简历生成器。项目中，我们使用了 Vue3 的 setup 语法糖，使得代码结构更加清晰。在该项目基础上，您可以进一步扩展功能，例如添加更多的输入项、设计不同的简历模板等。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情