Oh My CV 项目开发指南：从架构到配置的全面解析

Oh My CV 是一款基于浏览器的本地优先 Markdown 简历构建工具，旨在帮助用户快速创建专业简历。本指南将从项目架构、核心模块到配置文件，为你提供清晰的开发指引，即使是新手也能轻松上手。

一、项目架构概览

1.1 快速定位核心目录

Oh My CV 采用模块化的目录结构设计，主要分为源代码、配置文件和静态资源三大区域。以下是完整的项目结构树：

oh-my-cv/
├── .github/
│   └── workflows/           # GitHub Actions 工作流配置
├── public/                  # 静态资源根目录
│   ├── assets/              # 图片等资源文件
│   ├── fonts/               # 字体文件
│   └── index.html           # 应用入口页面
├── src/                     # 源代码主目录
│   ├── assets/              # 项目静态资源
│   ├── components/          # Vue 组件
│   ├── layouts/             # 页面布局组件
│   ├── pages/               # 页面组件
│   ├── plugins/             # Vue 插件
│   ├── router/              # Vue Router 配置
│   ├── store/               # Vuex 状态管理
│   ├── styles/              # 全局样式
│   ├── utils/               # 工具函数
│   ├── App.vue              # 根组件
│   └── main.ts              # 应用入口文件
├── .editorconfig            # 编辑器配置
├── .eslintrc.js             # ESLint 配置
├── .gitignore               # Git 忽略规则
├── .npmrc                   # npm 配置
├── LICENSE                  # 项目许可证
├── package.json             # 依赖与脚本配置
├── pnpm-lock.yaml           # pnpm 依赖锁定
├── pnpm-workspace.yaml      # pnpm 工作区配置
├── README.md                # 项目说明文档
└── tsconfig.base.json       # TypeScript 基础配置

1.2 核心目录功能解析

• src/：项目的"大脑中枢"，包含所有业务逻辑和界面组件。其中 components/ 存放可复用的 Vue 组件，pages/ 对应路由页面，utils/ 则是各种辅助工具函数的集合。

• public/：静态资源的"仓库"，存放图片、字体等不需要编译处理的文件，这些资源会被直接复制到最终构建目录。

• 配置文件区：项目根目录下的各类配置文件（如 .eslintrc.js、package.json），它们就像项目的"控制面板"，管理着代码规范、依赖版本和构建流程。

二、核心模块解析

2.1 应用启动流程探秘

main.ts 作为应用的"启动器"，负责初始化 Vue 应用并将其显示在网页中。以下是关键代码解析：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App)
  .use(store)    // 集成 Vuex（状态管理工具）
  .use(router)   // 集成 Vue Router（路由管理）
  .mount('#app'); // 将应用挂载到页面的 #app 元素

这段代码的执行流程就像"搭建舞台"：先创建 Vue 实例，然后依次加载状态管理和路由系统，最后将整个应用"搬"到网页上显示。

2.2 核心功能模块介绍

• 路由系统（router/）：控制页面跳转的"导航员"，通过配置路由规则，实现不同页面间的无缝切换。

• 状态管理（store/）：应用数据的"中央仓库"，集中管理全局状态，确保组件间数据共享和同步。

• 组件体系（components/）：界面构建的"积木块"，将页面拆分为独立可复用的组件，提高开发效率和代码质量。

接下来我们将深入了解项目的配置系统，这是定制化开发的关键所在。

三、关键配置指南

3.1 项目依赖与脚本配置（package.json）

package.json 就像项目的"身份证"，记录了项目基本信息和依赖关系。核心配置如下：

{
  "name": "oh-my-cv",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",  // 启动开发服务器
    "build": "vue-cli-service build",  // 构建生产版本
    "lint": "vue-cli-service lint"     // 代码检查
  },
  "dependencies": {
    "vue": "^3.0.0",                  // Vue 核心库
    "vue-router": "^4.0.0",           // 路由管理
    "vuex": "^4.0.0"                  // 状态管理
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0", // Babel 插件
    "@vue/cli-plugin-eslint": "~4.5.0" // ESLint 插件
  }
}

通过 npm run serve 命令即可启动开发环境，npm run build 则可生成用于部署的生产文件。

3.2 代码规范配置（.eslintrc.js）

.eslintrc.js 是代码质量的"守门人"，确保团队代码风格一致。关键配置解析：

module.exports = {
  root: true,          // 标识为根配置文件
  env: { node: true }, // 支持 Node 环境
  extends: [
    'plugin:vue/vue3-essential', // Vue 3 基础规则
    'eslint:recommended'         // ESLint 推荐规则
  ],
  parserOptions: {
    parser: 'babel-eslint' // 使用 Babel 解析器
  },
  rules: {
    // 可在此添加自定义规则
  }
};

通过配置不同的规则，可以自动检测代码中的潜在问题，如未使用的变量、语法错误等。

3.3 TypeScript 配置（tsconfig.base.json）

对于 TypeScript 项目，tsconfig.base.json 是"编译器的指南针"，定义了 TypeScript 的编译选项，确保代码的类型安全和正确转换。

通过以上配置，Oh My CV 项目实现了开发流程的规范化和自动化，为高效开发打下了坚实基础。无论是修改现有功能还是扩展新特性，理解这些核心配置都是必不可少的第一步。