437 lines
14 KiB
Markdown
437 lines
14 KiB
Markdown
# 项目清理计划
|
||
|
||
## 项目概述
|
||
本项目基于 **uni-app + Vue 3** 技术栈的电商类应用。当前项目混合了技术栈代码和业务逻辑代码，需要进行清理，保留所有技术栈相关的配置和框架代码，删除所有业务逻辑相关的文件和代码。
|
||
|
||
---
|
||
|
||
## 一、技术栈分析
|
||
|
||
### 1.1 核心技术框架
|
||
- **前端框架：** Vue 3.4.21
|
||
- **多端框架：** uni-app (3.0.0)
|
||
- **构建工具：** Vite 5.2.8 + Uni插件系列
|
||
- **UI框架：** UnoCSS 66.0.0 + uni-ui组件库
|
||
- **状态管理：** Pinia 2.0.36 + pinia-plugin-persistedstate 3.2.1
|
||
- **HTTP库：** Alova 3.3.3 + @alova/adapter-uniapp 2.0.14
|
||
- **类型系统：** TypeScript 5.8.0
|
||
- **路由：** uni-app内置路由
|
||
|
||
### 1.2 开发工具链
|
||
- **代码规范：** ESLint 9.31.0 + @uni-helper/eslint-config
|
||
- **提交规范：** Husky 9.1.7 + @commitlint/cli
|
||
- **代码格式化：** unplugin-auto-import
|
||
- **构建分析：** rollup-plugin-visualizer
|
||
- **开发服务器：** Vite + proxy配置
|
||
|
||
### 1.3 主要依赖
|
||
- dayjs (时间处理)
|
||
- js-cookie (Cookie管理)
|
||
- html5-qrcode / vue-qrcode-reader (二维码)
|
||
- wot-design-uni (UI组件库)
|
||
- z-paging (分页组件)
|
||
- @tanstack/vue-query (数据状态管理)
|
||
- sass (CSS预处理)
|
||
|
||
---
|
||
|
||
## 二、保留的技术栈文件清单
|
||
|
||
### 2.1 根目录配置文件 ✅ 保留
|
||
```
|
||
✓ package.json # 依赖配置（保留技术栈依赖，删除业务依赖）
|
||
✓ pnpm-lock.yaml # 锁定文件
|
||
✓ tsconfig.json # TypeScript配置
|
||
✓ vite.config.ts # Vite构建配置（保留，简化业务相关配置）
|
||
✓ uno.config.ts # UnoCSS配置
|
||
✓ manifest.config.ts # uni-app应用配置（保留基础配置，删除业务配置）
|
||
✓ pages.config.ts # 页面配置（保留基础配置）
|
||
✓ eslint.config.mjs # ESLint配置
|
||
✓ .editorconfig # 编辑器配置
|
||
✓ .gitignore # Git忽略配置
|
||
✓ .npmrc # NPM配置
|
||
✓ .commitlintrc.cjs # 提交规范配置
|
||
```
|
||
|
||
### 2.2 环境配置目录 ✅ 保留
|
||
```
|
||
✓ env/ # 环境变量目录（保留技术栈相关配置）
|
||
- .env.development
|
||
- .env.production
|
||
- .env.test
|
||
- env.d.ts
|
||
```
|
||
|
||
### 2.3 源代码核心架构 ✅ 保留
|
||
```
|
||
✓ src/
|
||
✓ main.ts # 应用入口
|
||
✓ App.vue # 根组件
|
||
✓ uni.scss # 全局样式
|
||
|
||
✓ config/ # 基础配置
|
||
✓ setting.ts # 通用配置模板
|
||
|
||
✓ http/ # HTTP请求核心
|
||
✓ http.ts # HTTP封装（保留核心功能）
|
||
✓ interceptor.ts # 拦截器（保留技术栈拦截）
|
||
✓ types.ts # HTTP类型定义
|
||
✓ tools/
|
||
✓ queryString.ts # 工具函数
|
||
|
||
✓ hooks/ # 通用Hooks
|
||
✓ useRequest.ts # 请求Hook模板
|
||
|
||
✓ utils/ # 通用工具（保留技术栈工具）
|
||
✓ common.ts # 通用工具函数
|
||
✓ platform.ts # 平台检测
|
||
✓ systemInfo.ts # 系统信息
|
||
✓ bus.ts # 事件总线
|
||
|
||
✓ store/ # 状态管理（保留核心结构）
|
||
✓ index.ts # Pinia实例
|
||
✓ theme.ts # 主题管理
|
||
|
||
✓ components/ # 基础组件（保留通用组件）
|
||
✓ icons/ # 图标组件（保留技术栈图标）
|
||
|
||
✓ layouts/ # 布局组件（保留基础布局）
|
||
✓ default.vue # 默认布局模板
|
||
|
||
✓ router/ # 路由配置
|
||
✓ config.ts # 路由配置（保留基础配置）
|
||
✓ interceptor.ts # 路由拦截器
|
||
|
||
✓ tabbar/ # 底部导航（保留配置结构）
|
||
✓ config.ts # 导航配置模板
|
||
✓ store.ts # 导航状态
|
||
|
||
✓ types/ # 类型定义
|
||
✓ typings.ts # 全局类型
|
||
✓ auto-import.d.ts # 自动导入类型
|
||
✓ components.d.ts # 组件类型
|
||
✓ uni-pages.d.ts # 页面类型
|
||
|
||
✓ style/ # 全局样式
|
||
✓ index.scss # 全局样式入口
|
||
✓ iconfont.css # 图标字体
|
||
|
||
✓ uni_modules/ # Uni插件模块（保留）
|
||
✓ uni-icons/ # 图标组件
|
||
✓ uni-scss/ # SCSS工具
|
||
|
||
✓ static/ # 静态资源（保留基础资源）
|
||
✓ tabbar/ # 导航图标（保留基础图标）
|
||
```
|
||
|
||
### 2.4 脚本目录 ✅ 保留
|
||
```
|
||
✓ scripts/ # 构建脚本
|
||
✓ postupgrade.js # 升级后处理
|
||
✓ window-path-loader.js # 路径加载器
|
||
```
|
||
|
||
### 2.5 开发工具配置 ✅ 保留
|
||
```
|
||
✓ .husky/ # Git hooks
|
||
✓ .vscode/ # VS Code配置
|
||
```
|
||
|
||
---
|
||
|
||
## 三、需要删除的业务逻辑文件清单
|
||
|
||
### 3.1 API接口层 ❌ 删除
|
||
```
|
||
❌ src/api/ # 全部业务API
|
||
❌ foo.ts # 示例API
|
||
❌ goods/ # 商品相关API
|
||
❌ login/ # 登录相关API
|
||
❌ layout/ # 布局相关API
|
||
❌ me/ # 个人中心API
|
||
❌ order/ # 订单相关API
|
||
❌ system/ # 系统管理API
|
||
❌ types/ # 业务类型定义
|
||
```
|
||
|
||
### 3.2 页面组件层 ❌ 删除
|
||
```
|
||
❌ src/pages/ # 全部业务页面
|
||
❌ about/ # 关于页面
|
||
❌ index/ # 首页（商品、购物车）
|
||
❌ login/ # 登录注册页面
|
||
❌ me/ # 个人中心页面
|
||
❌ order/ # 订单相关页面
|
||
❌ QrScanner/ # 二维码扫描页面
|
||
```
|
||
|
||
### 3.3 业务组件层 ❌ 删除
|
||
```
|
||
❌ src/components/
|
||
❌ icons/ # 业务图标组件
|
||
❌ position-edit/ # 位置编辑组件
|
||
```
|
||
|
||
### 3.4 状态管理 ❌ 删除
|
||
```
|
||
❌ src/store/
|
||
❌ cart.ts # 购物车状态
|
||
❌ user.ts # 用户状态
|
||
```
|
||
|
||
### 3.5 业务工具类 ❌ 删除
|
||
```
|
||
❌ src/utils/
|
||
❌ dataTree.ts # 树形数据处理
|
||
❌ index.ts # 业务工具集合
|
||
❌ login-util.ts # 登录工具
|
||
❌ qrcode.ts # 二维码工具
|
||
❌ token-util.ts # Token工具
|
||
❌ updateManager.wx.ts # 更新管理
|
||
❌ uploadFile.ts # 文件上传
|
||
```
|
||
|
||
### 3.6 业务配置 ❌ 删除
|
||
```
|
||
❌ src/hooks/
|
||
❌ useUpload.ts # 上传Hook
|
||
|
||
❌ src/static/
|
||
❌ tabbar/ # 业务相关静态资源
|
||
```
|
||
|
||
### 3.7 根目录业务文件 ❌ 删除
|
||
```
|
||
❌ src/App.ku.vue # 业务根组件
|
||
❌ project.config.json # 微信小程序业务配置
|
||
❌ project.private.config.json # 私有配置
|
||
❌ thirdParty.zip # 第三方库压缩包
|
||
❌ vite.config.ts.timestamp-*.mjs # 构建缓存文件
|
||
❌ README.md # 业务说明文档（如需保留需重写）
|
||
❌ index.html # H5入口（需要保留但删除业务内容）
|
||
❌ favicon.ico # 业务图标
|
||
```
|
||
|
||
### 3.8 编译产物 ❌ 删除
|
||
```
|
||
❌ dist/ # 构建产物
|
||
```
|
||
|
||
---
|
||
|
||
## 四、package.json 依赖清理计划
|
||
|
||
### 4.1 计划保留的技术栈依赖
|
||
计划保留以下核心依赖，用于构建完整的技术栈：
|
||
|
||
**核心框架依赖**
|
||
- Vue 3.4.21 及相关 uni-app 核心包
|
||
- Vite 5.2.8 及 uni-app 相关插件系列
|
||
|
||
**UI和样式依赖**
|
||
- UnoCSS 66.0.0 及相关预设
|
||
- sass 样式预处理器
|
||
- @dcloudio/uni-components 基础组件库
|
||
|
||
**状态管理和HTTP依赖**
|
||
- Pinia 状态管理及持久化插件
|
||
- Alova HTTP请求库及uni-app适配器
|
||
- @tanstack/vue-query 数据状态管理
|
||
|
||
**类型系统依赖**
|
||
- TypeScript 及相关类型定义包
|
||
|
||
**代码质量工具**
|
||
- ESLint 代码规范检查
|
||
- @commitlint 提交规范检查
|
||
- Husky Git hooks 管理
|
||
|
||
**开发工具依赖**
|
||
- unplugin-auto-import 自动导入插件
|
||
- rollup-plugin-visualizer 构建分析工具
|
||
|
||
### 4.2 计划删除的业务依赖
|
||
以下业务相关依赖计划从项目中移除：
|
||
|
||
**业务功能依赖**
|
||
- dayjs (时间处理，可根据需要作为工具保留)
|
||
- js-cookie (Cookie处理，业务相关)
|
||
- html5-qrcode、vue-qrcode-reader (二维码扫描功能)
|
||
- wot-design-uni (业务UI组件库，可选保留)
|
||
- z-paging (分页组件，业务相关)
|
||
- abortcontroller-polyfill (网络请求polyfill，可选保留)
|
||
|
||
---
|
||
|
||
## 五、配置简化计划
|
||
|
||
### 5.1 vite.config.ts 简化计划
|
||
计划对该配置文件进行以下调整：
|
||
- 移除业务相关的环境变量读取逻辑
|
||
- 保留核心构建配置和基础优化设置
|
||
- 精简业务插件配置
|
||
|
||
### 5.2 manifest.config.ts 简化计划
|
||
计划对该配置文件进行以下调整：
|
||
- 清理业务相关的应用名称、描述等配置
|
||
- 保留平台相关的核心配置项
|
||
- 优化应用图标路径配置
|
||
|
||
### 5.3 pages.config.ts 简化计划
|
||
计划对该配置文件进行以下调整：
|
||
- 移除所有业务页面路由定义
|
||
- 保留基础页面结构模板
|
||
- 建立示例页面路由
|
||
|
||
### 5.4 路由配置简化计划
|
||
计划对路由系统进行以下调整：
|
||
- 清理业务相关的路由规则
|
||
- 建立基础路由框架
|
||
- 创建示例路由配置
|
||
|
||
### 5.5 状态管理简化计划
|
||
计划对状态管理进行以下调整：
|
||
- 移除业务状态管理文件（cart.ts, user.ts等）
|
||
- 保留系统级状态管理（theme.ts等）
|
||
- 建立示例状态管理模板
|
||
|
||
---
|
||
|
||
## 六、清理后的项目结构预览
|
||
|
||
```
|
||
project-root/
|
||
├── doc/ # 项目文档
|
||
│ └── 项目清理计划.md # 本文档
|
||
├── env/ # 环境配置（保留）
|
||
├── src/
|
||
│ ├── components/ # 基础组件（保留）
|
||
│ ├── config/ # 基础配置（保留）
|
||
│ ├── http/ # HTTP核心（保留）
|
||
│ ├── hooks/ # 通用Hook（保留）
|
||
│ ├── layouts/ # 基础布局（保留）
|
||
│ ├── router/ # 路由配置（简化）
|
||
│ ├── static/ # 静态资源（保留）
|
||
│ ├── store/ # 状态管理（保留）
|
||
│ ├── style/ # 全局样式（保留）
|
||
│ ├── tabbar/ # 导航配置（简化）
|
||
│ ├── types/ # 类型定义（保留）
|
||
│ ├── uni_modules/ # Uni插件（保留）
|
||
│ ├── utils/ # 通用工具（保留）
|
||
│ ├── App.vue # 根组件（简化）
|
||
│ ├── main.ts # 应用入口（保留）
|
||
│ └── uni.scss # 全局样式（保留）
|
||
├── scripts/ # 构建脚本（保留）
|
||
├── package.json # 依赖配置（保留）
|
||
├── pnpm-lock.yaml # 锁定文件（保留）
|
||
├── tsconfig.json # TS配置（保留）
|
||
├── vite.config.ts # Vite配置（简化）
|
||
├── uno.config.ts # UnoCSS配置（保留）
|
||
├── manifest.config.ts # 应用配置（简化）
|
||
├── pages.config.ts # 页面配置（简化）
|
||
├── eslint.config.mjs # ESLint配置（保留）
|
||
└── 其他配置文件...
|
||
```
|
||
|
||
---
|
||
|
||
## 七、清理计划执行框架
|
||
|
||
### 阶段一：项目准备（已完成）
|
||
- ✅ 项目现状分析
|
||
- ✅ 清理目标确认
|
||
- ✅ 保留/删除清单制定
|
||
|
||
### 阶段二：业务文件移除计划
|
||
计划移除的文件类型及位置：
|
||
- **页面文件**：`src/pages/` 目录下的所有业务页面
|
||
- **接口文件**：`src/api/` 目录下的所有业务API
|
||
- **业务组件**：`src/components/` 目录下的业务特定组件
|
||
- **业务状态**：`src/store/` 目录下的业务状态管理文件
|
||
- **业务工具**：`src/utils/` 目录下的业务工具类
|
||
|
||
### 阶段三：配置文件优化计划
|
||
计划优化的配置文件：
|
||
- `package.json` - 精简依赖项
|
||
- `vite.config.ts` - 简化构建配置
|
||
- `manifest.config.ts` - 清理业务配置
|
||
- `pages.config.ts` - 简化路由配置
|
||
- 根目录业务相关文件
|
||
|
||
### 阶段四：核心代码重构计划
|
||
计划重构的核心文件：
|
||
- `App.vue` - 简化为技术栈模板
|
||
- HTTP请求封装 - 移除业务拦截逻辑
|
||
- 状态管理 - 保留技术栈核心结构
|
||
- 路由配置 - 建立示例路由体系
|
||
|
||
### 阶段五：验证测试计划
|
||
计划进行的验证项目：
|
||
- 依赖重新安装测试
|
||
- 构建流程验证
|
||
- 开发模式测试
|
||
- 多平台兼容性检查
|
||
|
||
### 阶段六：文档更新计划
|
||
计划的文档工作：
|
||
- 更新技术栈说明文档
|
||
- 建立示例代码结构
|
||
- 编写基础使用指南
|
||
|
||
---
|
||
|
||
## 八、重要说明
|
||
|
||
⚠️ **风险提示：**
|
||
1. 本次清理计划将移除所有业务逻辑代码，执行前需要完整备份
|
||
2. 技术栈文件的保留需要根据实际需求进行评估和调整
|
||
3. 配置简化可能影响现有功能，需要谨慎评估
|
||
4. 建议在清理前明确需要保留的业务模块清单
|
||
5. 清理过程不可逆，请确保有完整的回滚方案
|
||
|
||
📝 **后续规划建议：**
|
||
1. 清理完成后，建立基于该技术栈的完整示例项目
|
||
2. 建立技术栈组件使用文档和规范
|
||
3. 制定基于该模板的开发最佳实践指南
|
||
|
||
---
|
||
|
||
## 九、工作量评估
|
||
|
||
基于当前项目状况，清理计划涉及的工作量如下：
|
||
|
||
**文件处理量**
|
||
- 业务文件数量：约 200+ 个文件
|
||
- 需要简化的配置文件：5-10 个
|
||
- 需要重构的核心文件：10-20 个
|
||
|
||
**工作内容分布**
|
||
- 文件清理与删除
|
||
- 配置文件简化与优化
|
||
- 核心代码重构
|
||
- 测试验证（多平台）
|
||
- 文档更新与完善
|
||
|
||
**时间成本估算**
|
||
- 根据工作量复杂程度，预计需要 3-5 个工作日完成全部清理工作
|
||
|
||
*注：以上为参考估算，实际工作量可能因项目细节和需求变化而调整*
|
||
|
||
---
|
||
|
||
## 十、总结
|
||
|
||
本计划旨在将现有项目从完整的电商应用转换为纯净的 uni-app + Vue 3 技术栈模板。通过系统性的清理和重构，目标是保留核心技术架构，移除业务逻辑，为后续项目提供干净的开发基础。
|
||
|
||
**计划价值**
|
||
- 提供标准化的技术栈模板
|
||
- 简化项目结构，提高可维护性
|
||
- 为新项目提供快速启动的基础框架
|
||
|
||
**实施建议**
|
||
建议在执行清理工作前，组织团队进行充分讨论，确认：
|
||
- 技术栈保留的完整性
|
||
- 业务模块清理的彻底性
|
||
- 配置简化的合理性
|
||
- 后续维护的可行性
|