{"id":13536356,"url":"https://github.com/lybenson/bilibili-vue","last_synced_at":"2025-10-08T02:31:54.964Z","repository":{"id":62924714,"uuid":"79654412","full_name":"lybenson/bilibili-vue","owner":"lybenson","description":"前端vue+后端koa，全栈式开发bilibili首页","archived":true,"fork":false,"pushed_at":"2023-07-06T03:08:33.000Z","size":1054,"stargazers_count":310,"open_issues_count":11,"forks_count":684,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-26T06:32:19.703Z","etag":null,"topics":["axios","bilibili","koa2","vue2","vuex2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lybenson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-21T15:37:05.000Z","updated_at":"2025-01-22T12:00:08.000Z","dependencies_parsed_at":"2024-01-18T04:08:11.380Z","dependency_job_id":"0fc028ad-72ed-4293-9a4d-6c11490f8e4c","html_url":"https://github.com/lybenson/bilibili-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lybenson/bilibili-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lybenson%2Fbilibili-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lybenson%2Fbilibili-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lybenson%2Fbilibili-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lybenson%2Fbilibili-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lybenson","download_url":"https://codeload.github.com/lybenson/bilibili-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lybenson%2Fbilibili-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278877670,"owners_count":26061491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","bilibili","koa2","vue2","vuex2"],"created_at":"2024-08-01T09:00:37.685Z","updated_at":"2025-10-08T02:31:54.642Z","avatar_url":"https://github.com/lybenson.png","language":"Vue","funding_links":[],"categories":["Demo示例","Vue"],"sub_categories":[],"readme":"## 技术栈\n\n前端：vue3 + vuex + vite + stylus + nginx\n\n后端：koa2\n\n## 项目运行\n\n#### 源码地址:  [https://github.com/lybenson/bilibili-vue](https://github.com/lybenson/bilibili-vue) \n\n#### 如何运行\n\n运行前请先安装`nodejs`\n\n`clone`项目到本地\n\n```shell\ngit clone https://github.com/lybenson/bilibili-vue.git\n```\n\n前端运行\n\n```shell\ncd bilibili-vue \u0026\u0026 yarn \u0026\u0026 yarn dev\n```\n\n后端运行\n\n```shell\ncd bilibili-vue/bilibili-api \u0026\u0026 yarn install \u0026\u0026 yarn dev\n```\n\n为了确保运行正确，请先运行后端服务。再运行前端，之后访问 http://localhost:8080\n\n## 组件\n\n根据首页的各模块的功能不同，划分出了共20多个可复用的组件。具体请看下方\n\n```shell\n├── banner  //轮播组件\n│   ├── Banner.vue\n│   └── BannerItem.vue\n├── common  // 公共组件\n│   ├── BHeader.vue\n│   ├── BMenu.vue\n│   ├── BMenuItem.vue\n│   ├── PostMaterial.vue\n│   ├── Search.vue\n│   └── TopContainer.vue\n├── content  // 主内容组件\n│   └── BContent.vue\n├── contentRow  // 单个分类的组件\n│   ├── BContentRow.vue\n│   ├── BRowBody.vue\n│   ├── BRowHead.vue\n│   ├── BRowItem.vue\n│   ├── BRowRank.vue\n│   └── BRowRankBody.vue\n├── contentTop  // 页面顶部组件\n│   ├── BContentTop.vue\n│   └── BContentTopItem.vue\n├── live  //直播所在的组件\n│   ├── BLive.vue\n│   ├── BLiveItem.vue\n│   ├── BLiveRank.vue\n│   └── BLiveRankItem.vue\n├── nav  //右侧导航条组件\n│   ├── BNavSide.vue\n│   └── smooth-scroll.js\n└── promote  // 推广组件\n    ├── BPromote.vue\n    └── BPromoteItem.vue\n```\n\n组件的原则就是尽量将复杂的UI布局划分成单个小的UI组件，逻辑处理也被划分成更多的单个小的逻辑。数据流动采用的单向数据流动。子组件的数据更多的是来自于父组件，父组件的数据主要是其本身发起的`ajax`请求。本项目中`ajax`请求库使用的是`axios`\n\n## 状态管理\n\n目前的状态管理采用`vuex`。由于`vuex`可以分多个子`module`。所以在不同模块下单独维护一份状态，同时对于一些公共的状态，比如发起网络请求的`requesting`，错误时的状态`error`则保存在根状态中，之后可以通过子模块中的`rootState.requesting`获取来赋值。\n\n在子模块中发送网络请求获取数据是一个异步的过程，所以将网络请求放在`actions`。每次发起网络需要经历下面的步骤\n\n1. 请求中\n\n   ```\n   rootState.requesting = true  //请求状态更新为true,表示请求中\n   commit(TYPE.XX_REQUEST)  // 发送同步操作，请求中的数据处理\n   ```\n\n2. 请求成功\n\n   ```\n   rootState.requesting = false  //请求状态更新为false,表示请求结束\n   commit(TYPE.XX_SUCCESS, response) //发送同步操作,处理请求成功后数据\n   ```\n\n3. 请求失败\n\n   ```\n   rootState.requesting = false  //请求状态更新为false,表示请求结束\n   rootState.error = error\n   commit(TYPE.XX_FAILURE, error) //发送同步操作,处理请求失败\n   ```\n\n## 动画\n\nB站首页充斥着大量的动画效果。目前动画使用的主要有三种方式：\n\n1. 以`hover`效果触发。\n\n2. 通过`js`触发的效果，如点击轮播图的原点时，主要通过设置css属性`transition: .2s;`，再通过`js` 设置css属性`this.$refs.banner.style.marginLeft = left`。\n\n3. 通过`vue`提供的动画方式。\n\n   ```javascript\n   \u003ctransition name=\"fade\"\u003e\n    \u003cdiv v-if=\"isSort\"\u003e\n        \u003cdiv class=\"tip\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"custom-bg\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n   \u003c/transition\u003e\n   ```\n\n## 样式\n\n样式文件使用的是`stylus`，暂未使用任何`vue`现成的UI组件。需要安装`stylus-loader`, `stylus`，由于`vue-cli`中的`webpack`已经配置好了`stylus`了，所以只需要安装就可以了。\n\n```shell\nnpm install stylus-loader --save-dev\nnpm install stylus --save-dev\n```\n## 性能优化\n\n* 图片懒加载\n* 压缩`js`、`css`\n\n\n* 服务器开启`gzip`\n* 浏览器缓存\n* ...\n\n## 发布\n\n完成项目后将发布到自己的服务器上，首先确保服务器已安装`nodejs`，具体安装步骤不再赘述。\n\n#### 后端发布\n\n后端采用`pm2`做项目管理\n\n安装`pm2`\n\n```shell\nnpm install pm2 -g\n```\n\n启动项目\n\n```\ncd bilibili-api \u0026\u0026 npm install \npm2 start index.js\n```\n\n#### 前端发布\n\n1. `webpack`打包\n\n```\nnpm run build\n```\n\n需要注意的是，直接运行此命令可能会导致资源无法找到的问题。所以需要对`webpack`配置做一定的修改。\n\n在`webpack.base.conf.js`文件中修改`publicPath`如下\n\n```javascript\noutput: {\n    path: config.build.assetsRoot,\n    publicPath: './',  //资源的公共路径\n    // publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,\n    filename: '[name].js'\n}\n```\n\n这样打包后还会出现`stylus`中`background-image `资源无法找到的问题，我采用的方式修改`ExtractTextPlugin`配置，在`webpack.prod.conf.js`中修改\n\n```javascript\nnew ExtractTextPlugin('[name].[contenthash].css')\n```\n\n将分离的`css`打包路径分离到`static`文件夹之外。\n\n打包完成后上传到服务器`/var/www/html/bilibili`目录下。\n\n2. 配置nginx服务器。\n\n   ```\n   location /bilibili {\n     root /var/www/html;\n     index index.html;\n   }\n   ```\n\n## 总结\n\n#### 相关截图:\n\n首页：\n\n![20170423210104.png](http://upload-images.jianshu.io/upload_images/426435-d2a3e8b1463cdd2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n轮播：\n\n![20170423213449.png](http://upload-images.jianshu.io/upload_images/426435-edce08bcca33c6a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n直播：\n\n![20170423210140.png](http://upload-images.jianshu.io/upload_images/426435-c2a8412724f6a121.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![20170423210218.png](http://upload-images.jianshu.io/upload_images/426435-e0f463350b7b5f21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n排行：\n\n![20170423210248.png](http://upload-images.jianshu.io/upload_images/426435-6c61dcd032f80f92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n游戏：\n\n![20170423213519.png](http://upload-images.jianshu.io/upload_images/426435-bf8786eee29a4f3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n拖拽排序与滚动效果：\n\n![20170423213599.png](http://upload-images.jianshu.io/upload_images/426435-1ef3ae591420a074.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flybenson%2Fbilibili-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flybenson%2Fbilibili-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flybenson%2Fbilibili-vue/lists"}