简历组件

在本章中，我们将创建主要的简历组件。

基本信息组件

创建 src/components/BasicInfo.vue：

<template>
  <section class="basic-info">
    <h1>{{ name }}</h1>
    <p class="title">{{ title }}</p>
    <div class="contact">
      <span>{{ email }}</span>
      <span>{{ phone }}</span>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps({
  name: String,
  title: String,
  email: String,
  phone: String,
});
</script>

工作经验组件

创建 src/components/Experience.vue：

<template>
  <section class="experience">
    <h2>工作经验</h2>
    <div v-for="job in jobs" :key="job.company" class="job">
      <h3>{{ job.position }} - {{ job.company }}</h3>
      <p class="date">{{ job.startDate }} - {{ job.endDate }}</p>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps({
  jobs: Array as () => any[],
});
</script>

技能组件

创建 src/components/Skills.vue：

<template>
  <section class="skills">
    <h2>技能</h2>
    <div class="badges">
      <span v-for="skill in skills" :key="skill" class="badge">{{ skill }}</span>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps({
  skills: Array as () => string[],
});
</script>

下一步

在下一章中，我们将学习如何生成 PDF。