轻氧生活 - 技术栈详细说明-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyyi2022/article/details/148843283

轻氧生活 - 技术栈详细说明

📋 技术选型说明

前端框架选择

Vue 3 + Composition API

选择原因：
- 渐进式框架，学习曲线平缓
- Composition API 提供更好的逻辑复用
- 优秀的响应式系统
- 丰富的生态系统
核心特性使用：
- <script setup> 语法糖
- ref() 和 reactive() 响应式数据
- computed() 计算属性
- watch() 监听器
- 生命周期钩子

Vite 构建工具

选择原因：
- 极快的冷启动速度
- 热模块替换(HMR)
- 原生ES模块支持
- 优化的生产构建
配置特性：
- TypeScript支持
- CSS预处理器集成
- 插件生态系统

样式解决方案

TailwindCSS 3.x

选择原因：
- 原子化CSS，高度可定制
- 优秀的响应式设计支持
- 内置暗色模式支持
- 优化的生产构建体积
自定义配置：

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: { /* 自定义主色调 */ },
        secondary: { /* 自定义辅助色 */ }
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.5s ease-out'
      }
    }
  }
}

图标解决方案 - Iconify

选择原因：
- 统一的图标API
- 支持多种图标集
- 按需加载，优化性能
- Vue 3 完美集成
使用的图标集：
- Material Design Icons (mdi)
- 支持10万+图标
- 矢量图标，无失真

状态管理架构

Composition API + Composables

设计模式：

// useAuth.js - 认证状态管理
export function useAuth() {
  const isLoggedIn = ref(false)
  const currentUser = ref(null)
  
  const login = (userData) => { /* 登录逻辑 */ }
  const logout = () => { /* 登出逻辑 */ }
  
  return { isLoggedIn, currentUser, login, logout }
}

优势：
- 逻辑复用性强
- 类型安全
- 易于测试
- 按需导入

本地存储策略

LocalStorage 使用：
- 用户认证信息
- 收藏数据
- 个人设置
- 下载历史
数据结构设计：

// 用户数据结构
{
  user: { id, username, email, avatar },
  favorites: { locations: [], courses: [] },
  profile: { height, weight, goals, ... }
}

数据层设计

静态数据管理

JSON文件结构：
- sportLocations.json - 运动地点数据
- courses.json - 课程数据
- userStories.json - 用户故事
- resources.json - 资源文件
数据模型设计：

// 运动地点数据模型
{
  id: number,
  name: string,
  type: 'running' | 'cycling' | 'yoga' | 'fitness',
  difficulty: 'easy' | 'medium' | 'hard',
  coordinates: [longitude, latitude],
  facilities: string[],
  rating: number,
  reviews: number
}

API集成策略

第三方API支持：
- 天行数据API
- 聚合数据API
- 地理位置API
- 地图导航API
API封装设计：

// navigationService.js
class NavigationService {
  async getCurrentLocation() { /* 获取位置 */ }
  async getRoute(start, end) { /* 路线规划 */ }
  openExternalNavigation(destination) { /* 外部导航 */ }
}

组件架构设计

组件分层

页面组件 (Page Components)
- HomePage.vue
- SportMap.vue
- CourseLibrary.vue
功能组件 (Feature Components)
- AuthModal.vue
- TrainingSession.vue
- ProfileModal.vue
基础组件 (Base Components)
- 可复用的UI组件

组件通信模式

Props Down, Events Up
Provide/Inject 跨层级通信
Event Bus 兄弟组件通信
Composables 状态共享

功能模块实现

1. 用户认证系统

// 技术实现
- JWT Token 模拟
- LocalStorage 持久化
- 路由守卫保护
- 表单验证

2. 地图导航功能

// 核心算法
- Haversine 距离计算公式
- 地理坐标转换
- 路线规划算法
- 多平台地图集成

3. 视频播放系统

// 支持平台
- Bilibili (iframe嵌入)
- YouTube (embed API)
- 腾讯视频 (iframe嵌入)
- 自适应播放器

4. 文件下载服务

// 实现方案
- Blob API 文件生成
- URL.createObjectURL 下载
- 下载进度追踪
- 文件类型检测

性能优化策略

1. 代码分割

路由级别代码分割
组件懒加载
动态导入

2. 资源优化

图片懒加载
图标按需加载
CSS Tree Shaking
生产环境压缩

3. 缓存策略

浏览器缓存
LocalStorage 缓存
API 响应缓存

响应式设计

断点设计

/* TailwindCSS 断点 */
sm: 640px   /* 小屏手机 */
md: 768px   /* 平板 */
lg: 1024px  /* 小屏笔记本 */
xl: 1280px  /* 桌面显示器 */

移动端优化

Touch 事件处理
移动端导航菜单
手势操作支持
性能优化

开发工具链

代码质量

ESLint 代码检查
Prettier 代码格式化
Husky Git Hooks
Commitizen 提交规范

调试工具

Vue DevTools
Chrome DevTools
网络请求监控
性能分析工具

部署与构建

构建优化

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue'],
          ui: ['@iconify/vue']
        }
      }
    }
  }
}