专栏首页前端逗逗飞vuecli实现移动端视频类webAPP 项目发布地址

vuecli实现移动端视频类webAPP 项目发布地址

9月初就申请了 掘金小册子,到现在也没审核通过,只能将此项目的文字教程发布到小专栏了, 小专栏地址

项目介绍

使用vue.js作为此项目的技术栈,通过项目脚手架搭建、数据mock、架构设计、代码编写、编译打包,使读者了解前端开发全流程。项目中的代码规范致力于编写高可维护,易于扩展的前端高质量代码。 项目中视频自动播放、上拉播放、下拉播放是本项目的亮点,h5调用手机端摄像头实现 视频采集 更是亮点中的亮点 主要包含以下几个部分:

  • 1:vue工程初始化(移动端rem适配、阿里图标字体引用)
  • 2:APP项目骨骼搭建、
  • 3:首页、朋友、发布、我的、视频播放组件封装
  • 4:利用video.js 实现H5视频播放功能。
  • 5:利用vuex做全局数据状态共享

项目亮点

  • 1:H5调用安卓ios摄像头实现录像并将录像上传到工程内
  • 2:小视频上传
  • 3:视频列表上拉时暂停播放正在播放的视频,自动播放下一个视频
  • 4:视频列表下拉时暂停播放正在播放的视频,自动播放上一个视频

整体的完成效果

小专栏购买地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vuecli实现移动端视频类webAPP-项目搭建

    在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的...

    前端逗逗飞
  • vuecli实现移动端视频类webAPP- 项目基本骨架搭建

    为什么移动端CSS里面写了1px,实际上看起来比1px粗;是因为UI设计师要求的1px是指设备的物理像素,而CSS里记录的项目是逻辑像素,他们之间存在一个比例关...

    前端逗逗飞
  • Migrate From Vue-cli to Vite

    [译] 原文地址:https://medium.com/nerd-for-tech/from-vue-cli-to-vitejs-648d2f5e031d

    皮小蛋
  • 一个合格的中级前端工程师需要掌握的技能笔记(下)

    Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者

    达达前端
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,My...

    程序员追风
  • 在线体验 Windows 11「GitHub 热点速览 v.21.30」

    有什么比无需安装系统,检测硬件兼容度,只要打开一个浏览器,输入某个神秘的地址回车,即可体验 Windows 11 更棒的呢?windows11 就是这么一个小工...

    HelloGitHub
  • 一般Web前端开发要学什么 如何掌握Web前端技术

    一般Web前端开发要学什么?如何掌握Web前端技术?越来越多的行业巨头不断向Web前端示好,除苹果、微软、黑莓之外,谷歌的Youtube已部分使用Web前端。C...

    用户5827212
  • 一份来自前端开发工程师的规范简历

    王小婷
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • 百度的71个非常厉害的开源项目

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可...

    开发者技术前线
  • Electron集成Vue Cli3创建项目

    插件官网地址: https://nklayman.github.io/vue-cli-plugin-electron-builder/

    剑行者
  • 2017 JavaScript 开发者的学习图谱 | 码云周刊第 25 期

    码云项目推荐 1前端框架类 1. 基于 Vue.js 的 UI 组件库 iView ? 项目简介:iView 是一套基于 Vue.js 的 UI 组件库,主要服...

    码云Gitee
  • ​用开发本地tcpip程序的思路开发webapp

    本文关键字:the headless cms,b/s web to c/s web, headless webapp backend.

    minlearn
  • Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发

    什么是Node.js简介呢?它是一个基于JavaScript的运行环境,Node.js发布于2009年5月,对Chrome V8引擎进行了封装,是由RyanDa...

    达达前端
  • 盆盆的原创Azure Stack文档和视频

    自打2015年5月微软Build大会宣布研发Azure Stack,一直到前不久微软Tech Sumit上CEO亲自宣布Azure Stack上市,盆盆一直都...

    盆盆
  • 手机网页用Bootstrap还是jQuery Mobile

    很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 ...

    wangxl
  • 腾讯云快速搭建微信小程序服务

    小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书。

    云上云
  • Vue CLI 3.0脚手架如何配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。

    六小登登
  • Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。

    六小登登

扫码关注云+社区

领取腾讯云代金券