logo
简体中文

导航菜单

使用 Vue 生成简历 PDF

创建项目

在完成环境配置后，我们可以开始创建简历生成项目了。本章将指导你完成项目的创建和基本配置。

创建 Vite + Vue 项目

  1. 打开终端，进入你想要创建项目的目录，执行以下命令：

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

  2. 安装依赖：

    pnpm install

配置项目

  1. 打开 package.json 文件，添加 Puppeteer 依赖和相关脚本：

    {
  "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. 安装新添加的依赖：

    pnpm install

配置 Vite

打开 vite.config.ts 文件，配置如下：

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

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

创建目录结构

创建以下目录结构：

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

创建目录：

mkdir -p src/components scripts temp

创建 temp 目录的 .gitignore

在 temp/.gitignore 中添加：

*
!.gitignore

这样可以将生成的 PDF 文件排除在版本控制之外。

清理默认代码

  1. 打开 src/main.ts，确保内容如下：

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

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

  2. 打开 index.html，确保内容如下：

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

运行项目

启动开发服务器：

pnpm dev

在浏览器中打开 http://localhost:5173，你应该能看到 Vue 的默认页面。

常见问题

1. 端口被占用

如果 5173 端口被占用，Vite 会自动使用下一个可用端口。你也可以在 vite.config.ts 中指定其他端口。

2. TypeScript 报错

确保 tsconfig.json 配置正确：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

下一步

现在我们已经创建了基本的项目结构，接下来我们将在简历组件开发章节中学习如何开发简历页面的各个组件。

搜索