logo
English

导航菜单

Build Resume PDF with Vue

Create Project

After completing the environment setup, we can start creating the resume generation project. This chapter will guide you through project creation and basic configuration.

Create Vite + Vue Project

  1. Open terminal, navigate to the directory where you want to create the project, and run:

    pnpm create vite my-resume --template vue-ts
cd my-resume

  2. Install dependencies:

    pnpm install

Configure Project

  1. Open package.json and add Puppeteer dependency and related scripts:

    {
  "name": "my-resume",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "pdf": "tsx scripts/generate-pdf.ts"
  },
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "@types/node": "^20.10.0",
    "@vitejs/plugin-vue": "^5.0.0",
    "puppeteer": "^22.0.0",
    "tsx": "^4.7.0",
    "typescript": "^5.3.0",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.0"
  }
}

  2. Install newly added dependencies:

    pnpm install

Configure Vite

Open vite.config.ts and configure:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173
  }
})

Create Directory Structure

Create the following directory structure:

my-resume/
├── src/
│   ├── components/
│   │   ├── Badge.vue
│   │   ├── Card.vue
│   │   ├── IconLink.vue
│   │   └── TimelineItem.vue
│   ├── App.vue
│   └── main.ts
├── scripts/
│   └── generate-pdf.ts
├── temp/
│   └── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Create directories:

mkdir -p src/components scripts temp

Create .gitignore for temp directory

Add to temp/.gitignore:

*
!.gitignore

This excludes generated PDF files from version control.

Clean Default Code

  1. Open src/main.ts, ensure content is:

    import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

  2. Open index.html, ensure content is:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Resume</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Run Project

Start development server:

pnpm dev

Open http://localhost:5173 in your browser, you should see Vue’s default page.

Next Step

Now we have created the basic project structure, next we will learn how to develop resume page components in the Resume Components chapter.

搜索