/bilibili-vue

vue实战bilibili仿站：vue + vue router + vuex + axios

Primary LanguageVue

bilibili仿站vue

目前B站也是用的vue框架，自己试试用vue搭建B站，巩固一下学习的vue知识

更新 接口替换为Easy Mock代理真实数据接口 更新 原先版本webpack报错导致无法启动项目的问题，项目迁移至cli3.x构建的项目

如何安装与使用

git clone git@github.com:zlyyyy/bilibili-vue.git  //下载项目

cd bilibili-vue //进入bilibili-vue目录

yarn构建安装依赖

// 外网安装依赖可使用vue ui命令以图形化界面创建和管理项目
yarn install

项目启动

yarn run serve
或
npm run serve

项目打包

yarn run build
或
npm run build

代码格式检查

yarn run lint
或
npm run lint

代码格式检查并自动修复

yarn run lint -- --fix
或
npm run lint -- --fix

技术栈

  • Vue-Cli（Vue 脚手架工具）
  • Vue（核心框架）
  • Vue-Router（页面路由）
  • Vuex（状态管理）
  • ES 6 / 7 （JavaScript 语言的下一代标准）
  • Sass（CSS预处理器）
  • Axios（网络请求）

部分截图

文件架构

.
├── public                                      // 静态资源文件目录 
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
│   ├── api                                     
│   │   └──  index.js                           // 接口配置
│   ├── assets                                  // 图片文件
│   ├── components                              // 组件
│   │   │   ├── ad                 
│   │   │   │   └── adSlide.vue                 // 广告位轮播组件
│   │   │   ├── dropdown                 
│   │   │   │   └── dropdown.vue                // 下拉选择组件
│   │   │   ├── foot
│   │   │   │   └── footer.vue                  // 底部公共组件
│   │   │   ├── head
│   │   │   │   └── header.vue                  // 头部公共组件
│   │   │   ├── loginIn
│   │   │   │   └── loginIn.vue                 // 登录注册组件
│   │   │   ├── navMenu
│   │   │   │   └── navMenu.vue                 // 头部公用菜单组件
│   │   │   ├── popularize
│   │   │   │   └── popularize.vue              // 首页推广模块组件
│   │   │   ├── ranking
│   │   │   │   └── allList.vue                 // 排行榜页面排行组件
│   │   │   ├── recommend
│   │   │   │   └── recommend.vue               // 首页推荐内容组件
│   │   │   ├── search
│   │   │   │   └── searchList.vue              // 搜索页面搜索结果组件
│   │   │   ├── slide
│   │   │   │   └── slide.vue                   // 首页轮播图组件
│   │   │   ├── storeyBox
│   │   │   │   └── storeyBox.vue               // 新动态、新投稿组件
│   │   │   ├── timingBox
│   │   │   │   └── timingBox.vue               // 首页更新时间表组件
│   │   │   ├── zoneModule
│   │   │   │   └── zoneModule.vue              // 首页分类模块组件
│   │   │   ├── zoneRank
│   │   │       └── zoneRank.vue                // 首页分类模块内部排行组件
│   ├── pages                                  
│   │   ├── home
│   │   │   └── index.vue                       // 首页
│   │   ├── notFound
│   │   │   └── 404.vue                         // 404
│   │   ├── ranking
│   │   │   └── ranking.vue                     // 排行榜页面
│   │   ├── search
│   │   │   └── search.vue                      // 搜索页面
│   │   ├── video
│   │       └── video.vue                       // 播放视频页面
│   ├── router                                  
│   │   └── index.js                            // 路由配置页面
│   ├── store                                   // vuex的状态管理
│   │   ├── modules                             // store模块
│   │   │   ├── 404.js                          // 404模块
│   │   │   ├── bangumi.js                      // 番剧模块
│   │   │   ├── donghua.js                      // 动画模块
│   │   │   ├── guochuang.js                    // 国创模块
│   │   │   ├── header.js                       // 公用头部模块
│   │   │   ├── index.js                        // 首页模块
│   │   │   ├── login.js                        // 登录注册模块
│   │   │   ├── ranking.js                      // 排行榜页面模块
│   │   │   ├── search.js                       // 搜索页面模块
│   │       └── video.js                        // 视频播放模块
│   │   ├── action.js                           // 配置actions
│   │   ├── getters.js                          // 配置getters
│   │   ├── index.js                            // 引用vuex，组装各个配置
│   │   ├── mutation-types.js                   // 定义常量muations名
│   │   ├── mutation.js                         // 配置mutations
│   │   └── state.js                            // 配置store
│   ├── style
│   │   ├── common.scss                         // 公共样式文件
│   │   └── mixin.scss                          // 样式配置文件
│   └── utils
│   │   ├── http.js                             // axios二次封装
│       └── utils.js                            // 公共方法配置
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件，加载各种公共组件
├── vue.config.js                               // vue-cli 配置
└── package.json                                // package.json
.