Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lybenson/bilibili-vue
前端vue+后端koa，全栈式开发bilibili首页
https://github.com/lybenson/bilibili-vue
axios bilibili koa2 vue2 vuex2
Last synced: 2 months ago
JSON representation
前端vue+后端koa，全栈式开发bilibili首页
- Host: GitHub
- URL: https://github.com/lybenson/bilibili-vue
- Owner: lybenson
- License: mit
- Archived: true
- Created: 2017-01-21T15:37:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-06T03:08:33.000Z (over 1 year ago)
- Last Synced: 2024-09-26T16:41:00.740Z (3 months ago)
- Topics: axios, bilibili, koa2, vue2, vuex2
- Language: Vue
- Homepage:
- Size: 1.01 MB
- Stars: 284
- Watchers: 1
- Forks: 678
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - bilibili-vue - vue?style=social) - 全栈式开发bilibili首页 (Demo示例)
- awesome-vue - bilibili-vue - 全栈式开发bilibili首页 (Demo示例)
- awesome-github-vue - bilibili-vue - 全栈式开发bilibili首页 (Demo示例)
- awesome-github-vue - bilibili-vue - 全栈式开发bilibili首页 (Demo示例)
- awesome - bilibili-vue - 全栈式开发bilibili首页 (Demo示例)
README
## 技术栈
前端：vue3 + vuex + vite + stylus + nginx
后端：koa2
## 项目运行
#### 源码地址: [https://github.com/lybenson/bilibili-vue](https://github.com/lybenson/bilibili-vue)
#### 如何运行
运行前请先安装`nodejs`
`clone`项目到本地
```shell
git clone https://github.com/lybenson/bilibili-vue.git
```
前端运行
```shell
cd bilibili-vue && yarn && yarn dev
```
后端运行
```shell
cd bilibili-vue/bilibili-api && yarn install && yarn dev
```
为了确保运行正确，请先运行后端服务。再运行前端，之后访问 http://localhost:8080
## 组件
根据首页的各模块的功能不同，划分出了共20多个可复用的组件。具体请看下方
```shell
├── banner //轮播组件
│ ├── Banner.vue
│ └── BannerItem.vue
├── common // 公共组件
│ ├── BHeader.vue
│ ├── BMenu.vue
│ ├── BMenuItem.vue
│ ├── PostMaterial.vue
│ ├── Search.vue
│ └── TopContainer.vue
├── content // 主内容组件
│ └── BContent.vue
├── contentRow // 单个分类的组件
│ ├── BContentRow.vue
│ ├── BRowBody.vue
│ ├── BRowHead.vue
│ ├── BRowItem.vue
│ ├── BRowRank.vue
│ └── BRowRankBody.vue
├── contentTop // 页面顶部组件
│ ├── BContentTop.vue
│ └── BContentTopItem.vue
├── live //直播所在的组件
│ ├── BLive.vue
│ ├── BLiveItem.vue
│ ├── BLiveRank.vue
│ └── BLiveRankItem.vue
├── nav //右侧导航条组件
│ ├── BNavSide.vue
│ └── smooth-scroll.js
└── promote // 推广组件
├── BPromote.vue
└── BPromoteItem.vue
```
组件的原则就是尽量将复杂的UI布局划分成单个小的UI组件，逻辑处理也被划分成更多的单个小的逻辑。数据流动采用的单向数据流动。子组件的数据更多的是来自于父组件，父组件的数据主要是其本身发起的`ajax`请求。本项目中`ajax`请求库使用的是`axios`
## 状态管理
目前的状态管理采用`vuex`。由于`vuex`可以分多个子`module`。所以在不同模块下单独维护一份状态，同时对于一些公共的状态，比如发起网络请求的`requesting`，错误时的状态`error`则保存在根状态中，之后可以通过子模块中的`rootState.requesting`获取来赋值。
在子模块中发送网络请求获取数据是一个异步的过程，所以将网络请求放在`actions`。每次发起网络需要经历下面的步骤
1. 请求中
```
rootState.requesting = true //请求状态更新为true,表示请求中
commit(TYPE.XX_REQUEST) // 发送同步操作，请求中的数据处理
```
2. 请求成功
```
rootState.requesting = false //请求状态更新为false,表示请求结束
commit(TYPE.XX_SUCCESS, response) //发送同步操作,处理请求成功后数据
```
3. 请求失败
```
rootState.requesting = false //请求状态更新为false,表示请求结束
rootState.error = error
commit(TYPE.XX_FAILURE, error) //发送同步操作,处理请求失败
```
## 动画
B站首页充斥着大量的动画效果。目前动画使用的主要有三种方式：
1. 以`hover`效果触发。
2. 通过`js`触发的效果，如点击轮播图的原点时，主要通过设置css属性`transition: .2s;`，再通过`js` 设置css属性`this.$refs.banner.style.marginLeft = left`。
3. 通过`vue`提供的动画方式。
```javascript
```
## 样式
样式文件使用的是`stylus`，暂未使用任何`vue`现成的UI组件。需要安装`stylus-loader`, `stylus`，由于`vue-cli`中的`webpack`已经配置好了`stylus`了，所以只需要安装就可以了。
```shell
npm install stylus-loader --save-dev
npm install stylus --save-dev
```
## 性能优化
* 图片懒加载
* 压缩`js`、`css`
* 服务器开启`gzip`
* 浏览器缓存
* ...
## 发布
完成项目后将发布到自己的服务器上，首先确保服务器已安装`nodejs`，具体安装步骤不再赘述。
#### 后端发布
后端采用`pm2`做项目管理
安装`pm2`
```shell
npm install pm2 -g
```
启动项目
```
cd bilibili-api && npm install
pm2 start index.js
```
#### 前端发布
1. `webpack`打包
```
npm run build
```
需要注意的是，直接运行此命令可能会导致资源无法找到的问题。所以需要对`webpack`配置做一定的修改。
在`webpack.base.conf.js`文件中修改`publicPath`如下
```javascript
output: {
path: config.build.assetsRoot,
publicPath: './', //资源的公共路径
// publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
}
```
这样打包后还会出现`stylus`中`background-image `资源无法找到的问题，我采用的方式修改`ExtractTextPlugin`配置，在`webpack.prod.conf.js`中修改
```javascript
new ExtractTextPlugin('[name].[contenthash].css')
```
将分离的`css`打包路径分离到`static`文件夹之外。
打包完成后上传到服务器`/var/www/html/bilibili`目录下。
2. 配置nginx服务器。
```
location /bilibili {
root /var/www/html;
index index.html;
}
```
## 总结
#### 相关截图:
首页：
轮播：
直播：
排行：
游戏：
拖拽排序与滚动效果：
