在使用 UniApp 构建图书管理系统的过程中，最开始我并没有太多关注代码的结构和可维护性。项目越写越大，我也越写越心虚。某天，我打开 index.vue，一眼望去，两千多行代码铺面而来——模板、逻辑、样式混在一起，我脑中浮现出四个大字：“屎山警告”。

于是，我对 CodeBuddy 发出了求救：

项目 vue 屎山代码太长，不利于维护，了解整个项目后帮我优化并拆分。

这一次，我决定系统地改造整个项目结构，从“一个.vue文件干到底”的模式，切换到职责清晰、结构合理的组件化开发。

🧩 项目结构梳理与策略制定

CodeBuddy 首先帮助我分析了整个项目的目录结构，很快得出了初步判断：

  • book-detail 和 settings 页面已完成 .vue/.js/.scss 分离；
  • index、category、profile 页面仍是单文件结构，急需拆分；
  • 缺乏公共组件复用，样式代码冗余且重复；
  • 没有统一的主题变量，样式难以维护。

于是，我们拟定了优化策略：

  1. 拆分大型页面为 .vue、.js、.scss 三文件结构；
  2. 提取可复用组件，建立 components/ 目录；
  3. 创建 theme/variables.scss，统一颜色、字体、圆角等变量；
  4. 重构 uni.scss，统一引入主题变量；
  5. 优化页面模板结构，减少嵌套与重复代码。

🏗️ 从组件化开始，建立清晰模块结构

我在 CodeBuddy 的建议下，逐步搭建了如下目录结构：

components/
├── common/      # 公共组件：背景、搜索框、书籍卡片
├── home/        # 首页专属组件
├── category/    # 分类页专属组件
└── book/        # 图书模块组件

✅ 公共组件提取

我们先后创建了三个公共组件：

  • BackgroundLayer.vue：带模糊和渐变背景的基础层；
  • SearchBar.vue：支持传入 placeholder 和事件的搜索栏；
  • BookCard.vue：统一展示书籍封面、标题和标签的卡片组件。

仅需一句话，让 CodeBuddy 帮我改造“屎山”代码_uni-app

🧩 页面拆分实践：Category 页面重构

最先动刀的是 category.vue，原文件代码量中等，适合练手。我们拆分为以下几部分：

  • category.vue：模板结构，引入组件；
  • category.js：页面逻辑；
  • category.scss：样式代码；
  • 新增组件：
  • CategoryNav.vue：顶部横向分类导航；
  • FilterToolbar.vue：筛选条件工具栏；
  • BookSection.vue：书籍分类展示区块（复用了 BookCard.vue）。

仅需一句话，让 CodeBuddy 帮我改造“屎山”代码_生活_02

重构之后，页面不仅变得整洁清晰，复用性也大大提升。例如 BookSection.vue，在首页推荐、分类展示等多个地方都可复用，只需传入 title 和 bookList 即可。

🏠 首页 index.vue 大刀阔斧改造

接下来我们重构了“灾难现场” index.vue。原本的 2000+ 行被整整拆分为：

  • index.vue：引入组件，结构扁平化；
  • index.js：书籍数据加载与交互逻辑；
  • index.scss：背景、模块排版样式；
  • 新增组件：
  • BannerSwiper.vue：轮播图；
  • ContinueReading.vue：继续阅读区域；
  • RecommendSection.vue：推荐区块。

仅需一句话，让 CodeBuddy 帮我改造“屎山”代码_生活_03

值得一提的是，RecommendSection.vue 设计时考虑了灵活性，支持传入布局参数（如列表、网格），并统一使用 BookCard 渲染书籍信息。这样的封装，大大减少了样式和逻辑的重复。

🎨 样式统一：创建 theme 变量系统

项目拆分后，样式维护成了新的痛点。于是我们引入 theme/variables.scss，统一管理如下变量：

$primary-color: #4a8cff;
$text-color: #ffffff;
$card-radius: 24rpx;
$padding-md: 32rpx;

然后在 uni.scss 中通过 @import './theme/variables.scss' 引入，逐步替换项目中的硬编码颜色、尺寸、圆角值。

仅需一句话，让 CodeBuddy 帮我改造“屎山”代码_生活_04

这一步虽然细碎，却是提高项目整体可维护性和主题可配置性的关键。

✨ 总结：从屎山到结构化，一步步走出来的成就感

通过与 CodeBuddy 的协作，我成功将一个结构混乱、组件耦合严重的 UniApp 项目，改造成了一个模块清晰、样式统一、组件复用良好的现代前端工程。整个过程中，我感受到：

  • 重构不是“重写”，而是“重新组织”；
  • 提前设定好组件规范、命名规范、样式规范，可以减少后期返工；
  • CodeBuddy 在分析目录、识别组件候选和批量生成文件方面非常高效，是我的“协作式小助手”。

下一步，我准备继续完善组件文档，添加 TypeScript 类型，甚至引入单元测试覆盖每一个模块，慢慢构建起一个真正可维护的中型前端项目。

以上就是我一次真实的前端项目重构经历，希望也能为同样面对“屎山”的你提供一点参考。结构清晰，维护无忧，才是项目长久发展的根基。

如你有兴趣，我也很愿意分享这套组件系统的详细设计规范，欢迎留言交流～