基于Vue 3 + Vite构建的直播平台PC端应用

• Vue 3.3+ - 渐进式JavaScript框架
• Vite 5.0+ - 下一代前端构建工具
• Vue Router 4 - 官方路由管理器
• Vuex 4 - 状态管理
• Element Plus - Vue 3 UI组件库
• Axios - HTTP客户端
• Socket.IO Client - WebSocket实时通信
• FLV.js - FLV视频播放器

zhibo/
├── public/              # 静态资源
├── src/
│   ├── api/            # API接口封装
│   │   ├── config.js   # API配置
│   │   ├── home.js     # 首页API
│   │   ├── live.js     # 直播API
│   │   ├── linkmic.js  # 连麦API
│   │   ├── livepk.js   # PK API
│   │   └── user.js     # 用户API
│   ├── assets/         # 静态资源
│   ├── components/     # 公共组件
│   │   ├── LivePlayer.vue      # 直播播放器
│   │   ├── ChatRoom.vue        # 聊天室
│   │   ├── LinkMicControl.vue  # 连麦控制
│   │   └── PkArena.vue         # PK竞技场
│   ├── router/         # 路由配置
│   ├── store/          # Vuex状态管理
│   ├── utils/          # 工具函数
│   │   └── socket.js   # WebSocket封装
│   ├── views/          # 页面视图
│   │   ├── Home.vue           # 首页
│   │   ├── LiveRoom.vue       # 直播间
│   │   └── UserProfile.vue    # 用户中心
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── index.html          # HTML模板
├── package.json        # 项目配置
├── vite.config.js     # Vite配置
└── README.md          # 项目说明

npm install

npm run dev

访问 http://localhost:3000

npm run build

npm run preview

• 轮播图展示
• 热门直播列表
• 分类直播推荐
• 最新直播列表
• 搜索功能

• FLV/WebRTC直播播放
• 实时聊天室
• 礼物系统
• 关注/取消关注
• 连麦功能（主播端）
• PK竞技功能

• 用户登录/注册
• 个人信息管理
• 关注/粉丝列表
• 账户设置

• 主播连麦申请与接受
• PK挑战发起与应战
• 实时PK计分
• 礼物互动特效

在 src/api/config.js 中配置API基础地址：

export const BASE_URL = '/phalapi/public/'

在 vite.config.js 中配置代理：

server: {
  proxy: {
    '/phalapi': {
      target: 'http://your-api-domain.com',
      changeOrigin: true
    }
  }
}

在 src/utils/socket.js 中配置WebSocket服务器地址：

this.socket = io('ws://your-domain.com', {
  // ...
})

1. 接口鉴权: 所有需要登录的接口都需要传递token参数
2. 直播协议: 支持FLV和WebRTC两种播放协议
3. 兼容性: 需要兼容不同浏览器的媒体播放能力
4. 实时通信: 连麦PK功能依赖WebSocket实现实时通信
5. 资源管理: 合理管理音视频资源，避免内存泄漏

• 项目基础架构搭建
• API接口封装
• 路由和状态管理配置
• 核心组件开发
• 主要页面开发
• 功能测试与优化
• 性能优化
• 部署上线

MIT