Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）—— 欢迎一键三连【已完结】

前言

最近利用空余时间打算进行一个完整的项目实战，所以借此机会整理一个Vue实战系列，本项目主要是 从 0 到 1 搭建一整套完整的实战项目，以及在开发过程中对于很多技术细节进行再学习和纠错处理。特整理本实战系列，如果有想法我小伙伴欢迎一起学习进步。

项目地址为：GitHub 欢迎大家 Star。

---

项目介绍

使用 vue.js 作为此项目的技术栈，通过项目脚手架搭建、数据mock、架构设计、代码编写、编译打包，来了解前端开发的全流程。项目中的代码规范致力于编写高可维护，易于扩展的前端高质量代码，欢迎大家一同 代码Review，提高代码质量。

技术栈

前端部分

• vue 2.x：用于构建用户页面的MVVM框架
• vue-router： 路由管理
• vuex：状态管理库，做全局数据状态共享
• vant：vue移动端UI组件库
• axios：处理网络请求

后端部分

• 采用 express mock 去模拟数据

---

项目目录

1. 项目初始化
2. 搭建项目基本骨架
3. 底部状态栏实现(实现原生APP 底部导航栏)
4. 顶部导航条实现
5. 视频播放列表实现
6. 首页视频详情实现
7. 点赞评论分享以及唱片旋转动画
8. 视频自动播放和播放与暂停
9. 视频评论列表
10. 本地mock数据实现数据请求
11. 手机号登录、密码登录、其它方式登录的实现
12. 引入Vuex实现数据管理以及登录流程的实现
13. 自定义全局弹出框组件的实现
14. 用户信息界面的实现
15. 用户信息编辑页面的实现
16. 用户信息编辑提交保存的实现
17. 我的消息页面的实现
18. 用户登录权限以及本地缓存的实现
19. 发布页面的实现(摄像头调用，视频录制等功能)
20. 优化代码整体结构与打包发布
21. 项目总结

本项目以及开发完成，上面所有章节都可进入查看学习。

虽然这部分基本内容已经开发完成，但是后面还会继续不断迭代更新，欢迎各位小伙伴持续关注。

长风破浪会有时，直挂云帆济沧海。各位 加油！

---

项目地址

GitHub

---

本项目代码开发主要参考小专栏作者 miyaliunian 进行学习，学习地址为：https://xiaozhuanlan.com/doudoufei，如有侵权请联系删除。