uniapp-vue-analyzer | uni-app/Vue 项目智能分析器 v3
版本 3.0 | 整合 AI 理解能力 + 精确统计分析
5 分钟生成专业项目体检报告，量化技术债务，发现代码隐患，让项目架构一目了然。
核心能力
| 能力 | 说明 |
|---|---|
| 📊 技术债务评分 | 0-100 分量化代码健康度，综合上下文评估 |
| 🔍 代码隐患扫描 | 自动发现大文件、低注释、旧语法、复杂函数 |
| 🏗️ 架构可视化 | 识别设计模式（Module/Observer/Factory/Strategy） |
| 📋 项目元信息提取 | 解析 manifest/pages.json、package.json 等配置 |
| 📝 生成体检报告 | 人类可读的 Markdown 报告 + 结构化数据 |
何时使用此 Skill
当用户需要以下帮助时触发：
- "分析这个项目"
- "分析 uni-app 项目" / "分析 Vue 项目"
- "帮我理解这个项目的结构"
- "生成项目文档" / "分析代码架构"
- "查看项目依赖关系" / "检查代码质量"
- "评估技术债务" / "项目体检"
- "代码审查" / "重构建议"
分析流程
1️⃣ 项目识别 → 2️⃣ 配置解析 → 3️⃣ 代码扫描 → 4️⃣ 评分计算 → 5️⃣ 报告生成
Phase 1: 项目识别
1.1 定位项目根目录
查找以下特征文件确定项目根目录：
| 项目类型 | 必需文件 | 其他特征 |
|---|---|---|
| uni-app | manifest.json |
pages.json、uni.scss |
| Vue 2 | package.json |
vue.config.js、vue-template-compiler |
| Vue 3 | package.json |
vite.config.js、@vue/compiler-sfc |
1.2 判断项目类型
// uni-app 判断
hasManifest = fs.existsSync('manifest.json')
hasPages = fs.existsSync('pages.json')
isUniApp = hasManifest && hasPages
// Vue 2 判断
hasVueCompiler = packageJson.devDependencies['vue-template-compiler']
// Vue 3 判断
hasVue3Compiler = packageJson.devDependencies['@vue/compiler-sfc']
1.3 检测目录结构
标准目录（按优先级）：
├── pages/ # 页面目录
├── pages-*/ # uni-app 多端页面
├── components/ # 组件
├── static/ # 静态资源
├── common/ 或 utils/ # 工具函数
├── mixins/ # 混入
├── uni_modules/ # uni-app 插件
├── store/ 或 vuex/ # 状态管理
├── api/ # API 接口
└── components/ # Vue 组件
Phase 2: 配置文件分析
uni-app 项目必须分析
| 文件 | 分析内容 | 重要性 |
|---|---|---|
manifest.json |
appid、名称、平台配置、权限、原生插件、广告 SDK | ⭐⭐⭐ |
pages.json |
页面路由、tabBar、分包配置、全局样式 | ⭐⭐⭐ |
package.json |
依赖、脚本命令、Vue 版本 | ⭐⭐⭐ |
uni.scss |
全局样式变量 | ⭐⭐ |
Vue 项目必须分析
| 文件 | 分析内容 | 重要性 |
|---|---|---|
package.json |
依赖、版本、构建脚本、Vue 版本 | ⭐⭐⭐ |
vue.config.js |
构建配置 | ⭐⭐ |
vite.config.js |
Vite 插件、构建配置 | ⭐⭐ |
.eslintrc.js |
ESLint 规则 | ⭐ |
babel.config.js |
转译配置 | ⭐ |
Phase 3: 代码质量评估
3.1 Vue 语法检查清单
Vue2 → Vue3 迁移问题
| 检查项 | Vue2 写法 | Vue3 应改为 | 优先级 |
|---|---|---|---|
| 生命周期 | destroyed |
unmounted |
🔴 高 |
| 生命周期 | beforeDestroy |
beforeUnmount |
🔴 高 |
| 全局 API | new Vue() |
createApp() |
🔴 高 |
| 原型挂载 | Vue.prototype |
app.config.globalProperties |
🔴 高 |
| 插件安装 | Vue.use() |
app.use() |
🔴 高 |
| v-model | v-model="value" |
v-model="modelValue" |
🟡 中 |
| v-model | @input |
@update:modelValue |
🟡 中 |
| 插槽 | slot="xxx" |
v-slot:xxx 或 #xxx |
🟡 中 |
| 事件 | .sync 修饰符 |
v-model:xxx |
🟡 中 |
| 样式 | /deep/ |
:deep() |
🟡 中 |
| 响应式 | Vue.observable |
reactive / ref |
🟡 中 |
| 状态管理 | Vuex | Pinia | 🟡 中 |
uni-app 特有说明
| 检查项 | 说明 | 行动 |
|---|---|---|
onUnload |
uni-app 页面生命周期，保留不变 | ✅ 正常 |
onShow/onHide |
uni-app 独有生命周期，保留不变 | ✅ 正常 |
uni. API |
平台兼容性检查 | 📋 检查 |
nvue 文件 |
原生渲染页面 | 📋 注意 |
3.2 技术债务量化扣分
评分体系（0-100 分）
| 问题类型 | 扣分规则 | 说明 |
|---|---|---|
var 声明 |
-2/处 | 应使用 let/const |
| 长函数 >100行 | -5/个 | 建议拆分 |
| 超大文件 >500行 | -3/个 | 警告阈值 |
| 超大文件 >1000行 | -5/个 | 严重阈值 |
| 深层嵌套 >4层 | -3/处 | 建议重构 |
| 硬编码值 | -1/处 | 应提取为常量 |
| 未使用的导入 | -0.5/个 | 清理代码 |
console.log |
-0.5/个 | 生产环境应移除 |
TODO / FIXME |
-1/个 | 遗留任务 |
| 空文件 | -2/个 | 占位符文件 |
评分标准
| 分数 | 等级 | 说明 |
|---|---|---|
| 90-100 | 🏆 A | 优秀，代码健康 |
| 80-89 | ✅ B | 良好，轻微问题 |
| 60-79 | ⚠️ C | 一般，需关注 |
| 40-59 | 🔶 D | 较差，建议改进 |
| <40 | ❌ F | 差，需要重构 |
3.3 设计模式识别
| 模式 | 识别特征 | 代码示例 |
|---|---|---|
| 单例模式 | getInstance() 或 static get instance |
js static getInstance() { return Instance } |
| 工厂模式 | create*() 或 factory |
js createUser() { return new User() } |
| 观察者模式 | on() / off() / emit() |
js on('event', handler) |
| 模块模式 | export default 或 export const |
js export default {} |
| 策略模式 | 条件分支策略对象 | js const strategies = {} |
| Mixin 模式 | Vue.mixin() | js Vue.mixin({}) |
3.4 注释覆盖率计算
注释比例 = 注释行数 / (总行数 - 空行数) × 100%
| 比例 | 等级 | 建议 |
|---|---|---|
| ≥20% | ✅ 优秀 | 良好文档 |
| 10-19% | ⚠️ 一般 | 可接受 |
| 5-9% | 🔶 偏低 | 建议增加 |
| <5% | 🔴 严重 | 必须改进 |
Phase 4: 文件统计
4.1 统计文件数量
| 类型 | 扩展名 |
|---|---|
| Vue 文件 | .vue |
| JavaScript | .js, .jsx |
| TypeScript | .ts, .tsx |
| 样式文件 | .css, .scss, .less |
| JSON 配置 | .json |
4.2 统计代码行数
总行数 = 代码行 + 注释行 + 空行
有效代码行 = 总行数 - 空行
注释比例 = 注释行 / 有效代码行 × 100%
4.3 排除规则
必须排除：
node_modules/unpackage/uni_modules/(第三方插件).git/dist/,build/,.output/*.min.js,*.min.css
可选排除：
static/(大文件)public/(静态资源)- 测试文件
*.test.js,*.spec.js
Phase 5: 生成报告
报告结构模板
# 📊 [项目名称] 项目分析报告
生成时间: YYYY-MM-DD HH:mm:ss
---
## 1. 项目概览
| 项目 | 值 |
|------|-----|
| 项目类型 | uni-app / Vue 2 / Vue 3 |
| 源码目录 | /path/to/src |
| 总文件数 | N |
| 总代码行数 | N |
| 注释比例 | N% |
---
## 2. 技术栈
- **框架版本**: Vue X.X.X
- **构建工具**: Vite / Webpack / Vue CLI
- **包管理器**: npm / yarn / pnpm
- **UI 框架**: Element UI / Vant / ...
- **状态管理**: Vuex / Pinia
---
## 3. 项目结构
[目录树，最大显示 3 层]
---
## 4. 技术债务评分
### 4.1 综合评分
| 指标 | 分数 |
|------|------|
| 代码规范 | X/20 |
| 复杂度 | X/20 |
| 安全性 | X/20 |
| 可维护性 | X/20 |
| Vue 迁移 | X/20 |
| **总分** | **X/100** |
评分: **[A/B/C/D/F]** - [优秀/良好/一般/较差/差]
### 4.2 问题统计
| 问题类型 | 数量 |
|---------|------|
| `var` 声明 | N |
| 长函数 (>100行) | N |
| 超大文件 (>500行) | N |
| 深层嵌套 (>4层) | N |
| `TODO` / `FIXME` | N |
| `console.log` | N |
---
## 5. Vue 迁移建议
### 🔴 高优先级
1. **[问题描述]**
- 位置: `文件路径`
- 建议: [修改方案]
### 🟡 中优先级
1. **[问题描述]**
- 位置: `文件路径`
- 建议: [修改方案]
---
## 6. 发现的问题
### 🔴 严重问题
| 问题 | 文件 | 建议 |
|------|------|------|
| ... | ... | ... |
### 🟡 中等问题
| 问题 | 文件 | 建议 |
|------|------|------|
| ... | ... | ... |
### 🟢 建议优化
| 问题 | 文件 | 建议 |
|------|------|------|
| ... | ... | ... |
---
## 7. 设计模式
识别到的设计模式：
- **模块模式**: [文件列表]
- **观察者模式**: [文件列表]
- **工厂模式**: [文件列表]
---
## 8. 总结
[总体评价和改进建议]
---
*报告由 uniapp-vue-analyzer v3.0 自动生成*
执行示例
用户请求
分析 D:\projects\my-uniapp 项目
AI 执行步骤
- 读取
D:\projects\my-uniapp\manifest.json→ 确定是 uni-app 项目 - 读取
D:\projects\my-uniapp\pages.json→ 获取页面结构 - 遍历所有
.vue文件 → 逐个检查 Vue 语法 - 统计代码行数和模式 → 计算技术债务
- 生成完整报告 → 输出 Markdown 格式
输出格式
默认输出 Markdown 格式报告。如用户需要，可额外生成：
- 📊 JSON 格式数据 - 便于程序处理
- 🌐 HTML 格式 - 便于分享
- 🌍 双语报告 - 中文/英文
注意事项
- 跳过自动生成的目录：
node_modules/、unpackage/、uni_modules/、dist/等 - 文件大小限制：单文件超过 1MB 时跳过详细分析，仅统计基本信息
- 编码处理：优先使用 UTF-8 编码读取，遇到编码问题记录但不中断分析
- 性能考虑：文件超过 500 个时，显示进度提示
本 Skill 无需预装脚本，所有分析由 AI 动态执行 | v3.0