Oh My CV 技术架构深度解析：从模块化设计到配置实践

1. 如何理解 Oh My CV 的模块化架构设计？

1.1 架构设计的核心原则

Oh My CV 采用分层模块化架构，将功能按职责划分为独立单元，通过明确定义的接口实现模块间通信。这种设计确保了代码复用性和可维护性，同时降低了功能扩展的复杂度。架构设计遵循"高内聚低耦合"原则，每个模块专注于特定功能，如/packages目录下的工具包各自处理不同的业务逻辑，避免功能交叉导致的维护难题。

1.2 核心目录功能解析

项目主体由两个核心目录构成：

• /packages：包含11个独立工具包，如处理文本格式的correct-case、动态样式生成的dynamic-css、Markdown解析相关的markdown-it系列插件等。每个工具包拥有独立的package.json和tsconfig.json，可作为单独npm包发布。
• /site：网站应用主体，包含Nuxt.js配置、页面组件、静态资源等。其中/src/components/edit目录实现了简历编辑功能，/src/composables/stores管理应用状态，/src/utils提供通用工具函数。

1.3 架构演进历程

Oh My CV 的架构发展经历了三个阶段：

1. 单应用阶段：初期所有代码集中在site目录，随功能增加逐渐臃肿
2. 模块化拆分：将通用功能提取为独立工具包，形成packages目录
3. 微前端架构：采用pnpm workspace实现多包管理，支持独立开发与集成测试

1.4 实战任务：模块依赖分析

1. 执行以下命令分析项目依赖关系：

   pnpm why @oh/correct-case
   

2. 查看输出结果，记录该工具包被哪些模块引用
3. 打开/site/src/components/edit/toolbar/CorrectCase.vue文件，分析工具包的具体使用场景

1.5 进阶思考

为什么工具包目录采用@oh/前缀命名？这种命名方式对多包管理有什么优势？如何在不修改源码的情况下替换某个工具包的实现？

2. 关键文件如何支撑项目运行流程？

2.1 应用启动流程解析

Oh My CV 基于Nuxt.js构建，启动流程如下：

1. 执行pnpm dev启动开发服务器
2. Nuxt读取/site/nuxt.config.ts配置
3. 加载i18n国际化配置(/site/i18n.config.ts)
4. 初始化全局状态管理(/site/src/composables/stores)
5. 渲染根组件/site/src/app.vue
6. 根据路由匹配对应页面组件(/site/src/pages)

2.2 核心文件功能详解

• /site/nuxt.config.ts：Nuxt应用配置中心，定义构建选项、模块引入和全局设置
• /site/src/composables/stores/style.ts：管理简历样式状态，包括字体、颜色、间距等样式属性
• /site/src/utils/markdown.ts：处理Markdown到HTML的转换，集成了多个自定义markdown-it插件
• /packages/front-matter/src/front-matter.ts：解析简历文件的Front Matter元数据，实现内容与样式分离

2.3 常见误区警示

注意：不要直接修改node_modules中的依赖代码！如需定制工具包功能，应通过fork工具包仓库并修改package.json中的依赖路径实现，例如：

"dependencies": {
  "@oh/correct-case": "file:../packages/correct-case"
}

2.4 实战任务：功能追踪与调试

1. 启动开发服务器：

   pnpm dev
   

2. 打开浏览器访问 http://localhost:3000
3. 在编辑页面修改字体大小，使用浏览器开发者工具定位到修改样式的代码位置
4. 跟踪样式变更如何从UI组件传递到状态管理再应用到DOM

2.5 进阶思考

如果需要添加新的文本对齐方式功能，涉及哪些核心文件的修改？状态管理与视图渲染之间的数据流向是怎样的？

3. 如何通过配置系统定制项目行为？

3.1 配置体系的层次结构

Oh My CV 采用三级配置体系：

• 项目级配置：根目录/package.json定义工作区和跨包脚本
• 应用级配置：/site/nuxt.config.ts控制Nuxt应用行为
• 功能级配置：各工具包的package.json定义特定功能参数

3.2 多环境配置策略

项目通过不同命令和配置文件实现环境隔离：

• 开发环境：pnpm dev启动，启用热更新和详细日志
• 生产环境：pnpm build构建，优化代码并禁用调试功能
• 测试环境：pnpm test执行，使用专用测试配置

3.3 核心配置文件解析

• /pnpm-workspace.yaml：定义工作区范围，使pnpm能识别packages和site目录
• /site/unocss.config.ts：配置原子化CSS引擎，定义自定义工具类
• /eslint.config.js：统一代码检查规则，确保代码质量和风格一致性

3.4 实战任务：配置定制实践

1. 修改/site/configs/pwa.ts文件，将应用名称改为"我的简历生成器"
2. 编辑/site/src/i18n/zh-cn.yaml，添加自定义提示文本
3. 执行pnpm build构建项目，观察构建输出变化
4. 运行pnpm preview查看修改效果

3.5 进阶思考

如何为不同语言版本配置不同的字体方案？配置变更后如何实现热更新而无需重启开发服务器？

4. 开发效率提升的最佳实践

4.1 多包开发工作流

采用pnpm workspace实现多包协同开发：

# 安装所有依赖
pnpm install

# 仅更新特定工具包
pnpm --filter @oh/utils add lodash

# 在所有包中执行lint
pnpm run lint -r

4.2 组件复用策略

优先使用组合式API抽取可复用逻辑，如/site/src/composables/toast.ts实现全局消息提示功能，通过以下方式在组件中复用：

import { useToast } from '@/composables/toast'

const { showToast } = useToast()
showToast('操作成功', 'success')

4.3 样式开发技巧

利用UnoCSS的原子化CSS特性加速样式开发，在/site/unocss.config.ts中定义自定义规则：

rules: [
  ['resume-shadow', { boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }]
]

在组件中直接使用class="resume-shadow"应用自定义样式

4.4 数据持久化方案

通过/site/src/utils/database.ts封装localStorage操作，实现简历数据本地存储，确保刷新页面后数据不丢失

4.5 实战任务：开发效率工具链搭建

1. 配置VS Code工作区设置，添加以下配置：

   {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "files.exclude": {
       "**/node_modules": true
     }
   }
   

2. 安装Vue Language Features扩展
3. 创建自定义代码片段，加速组件开发

4.6 进阶思考

如何设计一个基于Git的简历版本控制系统？如何实现不同设备间的简历数据同步？