# bilibili-vue

**Repository Path**: orangleli/bilibili-vue

## Basic Information

- **Project Name**: bilibili-vue
- **Description**: vue + express 仿bilibili的APP
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-24
- **Last Updated**: 2022-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 高仿bilibiliAPP

### 技术栈
前端  vue + axios + webpack + scss

后端  Express

### 目前实现的功能包括：
1. 首页推荐

2. 分类滑动导航

3. 搜索

4. 视频播放 （双击播放/暂停， 进度条拖动，倍速播放，全屏播放）

5. 相关视频推荐

6. 评论

7. 弹幕（发送弹幕，常用语，自定义颜色，大小，历史弹幕）

8. 一键换肤

9. 自定义模态框组件loading、alert

```
import alertModal from './base/alertModal/alertModal'
Vue.use(alertModal)

this.$message.showLoading()
this.$message.hideLoading()
```
弹幕效果现在全部内容是从右向左滚动的效果，等后续再实现高级效果

项目启动

```
后端启动
bilibili-vue/bilibili-express 目录下
npm start

前端启动
bilibili-vue 目录下
npm install 
npm run dev
```
先启动后台接口，再启动前端

部分效果图

## 主页
![](https://orangleli.github.io/imagesResources/index.png)

## 搜索
![](https://orangleli.github.io/imagesResources/搜索.png)

## 视频
![](https://orangleli.github.io/imagesResources/详情.png)

## 换肤

主页header中点击调色板按钮进入换肤界面
![](https://orangleli.github.io/imagesResources/theme-ex.png)

### 本项目只用于学习交流，请勿用于商业行为，如有问题，请联系1277947446@qq.com，感谢bilibili团队