前端vue+后端koa，全栈式开发bilibili首页（附源码）

原创

已于 2022-09-15 12:05:42 修改 · 832 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-15 12:04:35 首次发布

本文介绍了使用Vue3、Vuex、Vite和Koa2开发B站首页的全栈流程，包括技术栈、源码下载、项目运行、组件划分、状态管理、动画实现、样式处理、性能优化和发布部署等细节。通过组件化和状态管理优化了项目结构，运用多种动画技术复现B站首页效果，并提供了源码下载和运行指南。

技术栈

前端：vue3 + vuex + vite + stylus + nginx

后端：koa2

源码下载:

源码下载链接：https://wwb.lanzouy.com/iwSVW0bpr4be

项目运行

如何运行

运行前请先安装nodejs

clone项目到本地

git clone https://github.com/lybenson/bilibili-vue.git

前端运行

cd bilibili-vue && yarn && yarn dev

后端运行

cd bilibili-vue/bilibili-api && yarn install && yarn dev

为了确保运行正确，请先运行后端服务。再运行前端，之后访问 http://localhost:8080

组件

根据首页的各模块的功能不同，划分出了共20多个可复用的组件。具体请看下方

├── 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  // 页面顶部组件
│   ├──