bilibili仿站vue
目前B站也是用的vue框架，自己试试用vue搭建B站，巩固一下学习的vue知识
更新 接口替换为Easy Mock代理真实数据接口 更新 原先版本webpack报错导致无法启动项目的问题，项目迁移至cli3.x构建的项目
如何安装与使用
git clone [email protected]: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
.