开源项目 `web-resume` 使用教程

开源项目 web-resume 使用教程

web-resumeWeb前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历项目地址:https://gitcode.com/gh_mirrors/web/web-resume

1. 项目的目录结构及介绍

web-resume/
├── src/
│   ├── assets/
│   │   ├── resume/
│   │   │   └── local-resume.yml
│   ├── modules/
│   │   └── gtag.ts
│   ├── App.vue
│   ├── main.ts
├── public/
│   └── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md

• src/: 包含项目的源代码。
  • assets/: 存放静态资源，如简历配置文件 local-resume.yml。
  • modules/: 包含模块文件，如 gtag.ts 用于 Google Analytics。
  • App.vue: 主应用组件。
  • main.ts: 项目入口文件。
• public/: 包含公共资源，如 index.html。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: 锁定依赖版本。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

import { createApp } from 'vue';
import App from './App.vue';
import { VueGtag } from 'vue-gtag';

const app = createApp(App);
app.use(VueGtag, {
  property: {
    id: 'G-W022WEV65N'
  }
});
app.mount('#app');

• 导入 createApp 函数和 App 组件。
• 使用 VueGtag 插件进行 Google Analytics 配置。
• 创建 Vue 应用实例并挂载到 #app 元素上。

3. 项目的配置文件介绍

local-resume.yml

local-resume.yml 是简历的配置文件，包含简历的内容和格式。

name: 张三
title: 前端工程师
contact:
  email: example@example.com
  phone: 123-456-7890
education:
  - school: 北京大学
    degree: 本科
    major: 计算机科学与技术
    year: 2015-2019
experience:
  - company: 某科技公司
    position: 前端工程师
    duration: 2019-至今
    description: 负责前端开发和维护工作。

• name: 姓名。
• title: 职位。
• contact: 联系方式。
• education: 教育经历。
• experience: 工作经验。

通过编辑 local-resume.yml 文件，可以自定义简历的内容和格式。

web-resumeWeb前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历项目地址:https://gitcode.com/gh_mirrors/web/web-resume