Vue.js 项目实战之实现视频播放类WebApp的项目开发(仿抖音app)—— 欢迎一键三连【已完结】
前言最近利用空余时间打算进行一个完整的项目实战,所以借此机会整理一个Vue实战系列,本项目主要是 从 0 到 1 搭建一整套完整的实战项目,以及在开发过程中对于很多技术细节进行再学习和纠错处理。特整理本实战系列,如果有想法我小伙伴欢迎一起学习进步。项目地址为:GitHub 欢迎大家 Star。项目介绍使用 vue.js 作为此项目的技术栈,通过项目脚手架搭建、数据mock、架构设计、代码编写、编译
·
前言
最近利用空余时间打算进行一个完整的项目实战,所以借此机会整理一个Vue实战系列,本项目主要是 从 0 到 1 搭建一整套完整的实战项目,以及在开发过程中对于很多技术细节进行再学习和纠错处理。特整理本实战系列,如果有想法我小伙伴欢迎一起学习进步。
项目地址为:GitHub 欢迎大家 Star。
项目介绍
使用 vue.js 作为此项目的技术栈,通过项目脚手架搭建、数据mock、架构设计、代码编写、编译打包,来了解前端开发的全流程。项目中的代码规范致力于编写高可维护,易于扩展的前端高质量代码,欢迎大家一同 代码Review,提高代码质量。
技术栈
前端部分
- vue 2.x:用于构建用户页面的MVVM框架
- vue-router: 路由管理
- vuex:状态管理库,做全局数据状态共享
- vant:vue移动端UI组件库
- axios:处理网络请求
后端部分
- 采用
express mock
去模拟数据
项目目录
- 项目初始化
- 搭建项目基本骨架
- 底部状态栏实现(实现原生APP 底部导航栏)
- 顶部导航条实现
- 视频播放列表实现
- 首页视频详情实现
- 点赞评论分享以及唱片旋转动画
- 视频自动播放和播放与暂停
- 视频评论列表
- 本地mock数据实现数据请求
- 手机号登录、密码登录、其它方式登录的实现
- 引入Vuex实现数据管理以及登录流程的实现
- 自定义全局弹出框组件的实现
- 用户信息界面的实现
- 用户信息编辑页面的实现
- 用户信息编辑提交保存的实现
- 我的消息页面的实现
- 用户登录权限以及本地缓存的实现
- 发布页面的实现(摄像头调用,视频录制等功能)
- 优化代码整体结构与打包发布
- 项目总结
本项目以及开发完成,上面所有章节都可进入查看学习。
虽然这部分基本内容已经开发完成,但是后面还会继续不断迭代更新,欢迎各位小伙伴持续关注。
长风破浪会有时,直挂云帆济沧海。各位 加油!
项目地址
本项目代码开发主要参考小专栏作者 miyaliunian 进行学习,学习地址为:https://xiaozhuanlan.com/doudoufei,如有侵权请联系删除。
更多推荐
已为社区贡献8条内容
所有评论(0)