🏃 SmartSport

一个基于 Vue 3 构建的专业运动管理移动端应用

Github 仓库 · 报告问题

---

📋 项目介绍

SmartSport 是一款专注于运动数据管理的移动端 H5 应用，基于 Vue 3 + Vant 3 构建，提供运动记录、数据分析、健康管理等核心功能，帮助用户科学追踪和管理个人运动状态。

✨ 核心功能

• 📱 运动记录 - 支持多种运动类型的数据记录
• 📊 数据统计 - 基于 F2 图表库的专业数据可视化
• 💪 健康分析 - 个人运动健康数据报告
• 🎯 目标管理 - 设定并追踪运动目标
• 🔄 数据同步 - 实时保存运动数据

---

🛠 技术栈

类别	技术选型	用途
核心框架	Vue 3.x	前端核心框架
构建工具	Vite / Vue CLI 4.x	项目构建
路由	Vue Router 4.x	页面路由管理
状态管理	Vuex 4.x	集中式状态管理
UI 组件库	Vant 3.x	移动端组件库
图表库	F2 (@antv/f2)	数据可视化
网络请求	Axios	HTTP 请求
移动端适配	amfe-flexible + PostCSS	响应式适配
代码规范	ESLint + Prettier	代码质量

---

🚀 快速开始

环境要求

• Node.js: >= 14.x (推荐 16.x LTS)
• npm: >= 6.x 或 yarn:bash git clone https://github.com/devwaf/SmartSport.git cd SmartSport

# 使用 npm (推荐)
npm install

# 或使用 yarn
yarn install

3. 启动开发服务器

# 启动开发服务器 (支持热重载)
npm run serve

# 服务启动后访问: http://localhost:8080

4. 构建生产版本

# 构建优化后的生产版本
npm run build

# 构建产物将生成在 dist/ 目录下

5. 代码检查

# 检查并自动修复代码规范问题
npm run lint

---

📁 项目结构

sport/
├── public/                 # 静态资源
``` (favicon, index.html 等)
├── src/
│   ├── assets/             # 资源文件 (图片、字体、样式)
│   ├── components/         # 公共组件
│   ├── views/              # 页面视图
│   ├── router/             # 路由配置
│   ├── store/              # Vuex 状态管理
│   ├── utils/              # 工具函数
│   ├── api/                # API 接口封装
│   ├── icons/              # SVG 图标
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── .editorconfig           # 编辑器配置
├── .gitignore              # Git 忽略配置
├── babel.config.js         # Babel 配置
├── vue.config.js           # Vue CLI 配置
├── package.json            # 项目依赖
└── README.md               # 项目说明文档

---

🔧 配置说明

移动端适配

项目采用 rem 适配方案，基准值设为 37.5px = 1rem，即：

设计稿 750px = 20rem

此配置位于 vue.config.js 的 PostCSS 插件中。

图标系统

项目集成了 SVG Spritevue

javascript
devServer: {
  port: 8080,
  open: true,
  // 代理配置
  proxy: {
    '/api': {
      target: 'http://your-api-server.com',
      changeOrigin: true
    }
  }
}

---

📱 预览截图

登陆	运动记录

📸 截图存放路径: docs/screenshots/

---

📦 主要依赖

依赖包	版本	用途说明
vue	^3.0.0	核心框架
vue-router	^4.0.12	路由管理
vuex	^4.0.2	状态管理
vant	^3.4.4	移动端 UI 组件库
@antv/f2	^3.8.10	图表库 (数据可视化)
axios	^0.26.0	HTTP 请求
amfe-flexible	^2.2.1	移动端适配 (px 转 rem)
core-js	^3.6.5	JavaScript 垫片
qs	^6.10.3	URL 参数处理

---

🧪 开发规范

代码风格

• 遵循 Vue 3 官方风格指南
• 使用 ESLint + Prettier 保证代码一致性

分支管理

master     - 主分支 (生产环境)
develop    - 开发分支
feature/*  - 功能分支
hotfix/*   - 紧急修复分支

提交规范

feat:     新功能
fix:      Bug 修复
docs:     文档更新
style:    代码格式调整
refactor: 重构
test:     测试
chore:    构建/工具/辅助功能

---

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建你的特性分支：git checkout -b feature/awesome-feature
3. 提交改动：git commit -m 'feat: add awesome feature'
4. 推送分支：git push origin feature/awesome-feature
5. 提交 Pull Request

提交前请确保：

• ✅ 代码通过 npm run lint 检查
• ✅ 提交信息符合规范
• ✅ 新增功能有相应测试

---

📄 开源协议

本项目基于 MIT License 开源。

---

如果本项目对你有帮助，欢迎 ⭐ Star 支持！

---