基于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
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', {
// ...
})
- 接口鉴权: 所有需要登录的接口都需要传递token参数
- 直播协议: 支持FLV和WebRTC两种播放协议
- 兼容性: 需要兼容不同浏览器的媒体播放能力
- 实时通信: 连麦PK功能依赖WebSocket实现实时通信
- 资源管理: 合理管理音视频资源，避免内存泄漏
- 项目基础架构搭建
- API接口封装
- 路由和状态管理配置
- 核心组件开发
- 主要页面开发
- 功能测试与优化
- 性能优化
- 部署上线
MIT
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
