Enjsky.G的博客

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十四节： 朋友页面功能功能分析朋友页面功能是导航中的一个子页面功能，在这一页面中包含了朋友列表信息、通讯录的查看、扫一扫加好友、面对面加好友等功能。页面布局实现1.布局如下：<template> <di

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十四节： 消息页面功能功能分析消息页面功能是底部导航中的导航功能页面，包含系统消息、互动消息等内容。消息功能实现1.页面布局，代码如下：<template> <!-- 消息模块 --> &lt

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十三节： Header组件功能功能分析在我们编辑资料、消息中都有也顶部标题，为了提高代码复用性，将其封装成一个组件，在需要使用的位置，引入组件即可。组件实现1.组件结构，在组件文件夹common/components中闯将he

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十二节： 用户信息页面功能页面分析用户信息页面是底部导航我的跳转到用户信息，其中包含了个人资料编辑、个人信息展示、作品管理区能功能。实现步骤：1.页面布局及样式2.资料编辑功能实现页面布局及样式1.页面布局，代码如下：

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十一节： 注册登录及验证码功能功能分析在app中要实现注册及登录功能，首先思考一个问题，是在什么时候需要登录呢？使用过抖音app的都知道，在我们操作朋友、消息、我的等功能页面时，是需要登录验证的。那么我们怎么实现呢？功能实现步

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第十节： 评论列表功能回顾及介绍在第七节中我们实现了点评快捷键功能的组件，在这一章节中将进一步了解其中的点评功能的具体实现及父子组件的响应传值的解说。功能实现步骤1.在视频列表组件中创建评论列表布局2.定义评论功能函数3.

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第九节： 视频上滑下拉播放功能回顾及介绍在第五节中我们实现了视频列表及视频播放的组件，在这一章节中将进一步了解上滑、下滑播放视频的实现。视频播放组件详细地址：common/components/VidoeList。上滑播放功

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第八节： 视频播放功能回顾及介绍在第五节中我们实现了视频列表及视频播放的组件，在这一章节中将进一步了解视频播放的自动播放、暂停、播放等功能的实现及详细解说。视频播放组件详细地址：common/components/Vidoes。

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第七节： 视频点评快捷功能功能介绍此功能是在视频列表的右侧功能栏中的内容，其中包括关注、点赞、评论、分享、及音乐播放器效果于一体的功能点，在这一章中我们将介绍及实现右侧功能栏，为了使代码利用率更强，我们会使用组件进行封装处理。【温

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第六节： 首页视频详情功能详情功能介绍视频首页的详情信息显示及轮播动画的实现。为了增强功能模块的复用性，此处采用组件进行封装。组件结构分析1.组件结构2.组件的布局及实现/*视频详情信息组件author:enjsky.

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第五节：视频播放列表组件功能vue-awesome-swiper介绍众所周知的图片轮播插件swiper,快速，简单，高效，稳定。不过最新的swiper6对vue的兼容却不如人意。那么我们怎么解决这一问题呢？可使用第三轮播插件，运用J

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第四节：顶部导航栏组件开发思路【项目思路】在上一节中我们实现了底部导航栏的实现，接下来我们来完成顶部导航栏的实现。顶部导航栏存在于首页中，分为四个部分，分别是左侧直播图标、中间部分（关注、推荐）、右侧搜索图标。布局分析基础架构

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。【项目地址】项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。项目地址：GitHub第三节：底部导航栏组件开发思路在我们拿到一个项目后，不要急着进行业务功能的开发，首先了解清楚需求，并进行详细的分析思考，采用什么技术栈。确定方向后，先把项目基础架构创建好。这一过程就像我们建房子一样，首先要把地基建好，再一层一层的起

温馨提示：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。第二节：项目基础架构搭建创建项目1.使用vue-cli 创建项目，命令如下：【命令】：vue create drifting-cloud-appvue create drifting-cloud-app【解析】：drifting-cloud-app：为项目名称回车（Enter）会提示选取项目所需特性，如下图：这里选择【Manually select feature

温馨提示：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。第一节：项目环境搭建了解Node.jsNode.js是一个运行在chromeJavascript运行环境下（俗称GoogleV8引擎）的开发平台，用来方便快捷的创建服务器端网络应用程序，也可以把它理解为一个轻量级的JSP或PHP环境，如果用来开发Web应用的话，有时要便捷很多。Node.js的最大优点是处理并行访问，如果一个web应用程序同时会有很多访问连接，就能体现使用No

vue.js项目实战运用篇之抖音视频APP-持续更新中前序（发表文章的初衷）项目仓库项目介绍技术介绍前端部分后端部分项目目录异常问题汇总（持续更新）Git项目管理汇总（持续更新）结语前序（发表文章的初衷）发表此文章的初衷，在于以更全面的知识的巩固及知识的实际运用。在此之前，所遇知识技术交流文章大多都过于片面，只是局部内容的叙述，对于刚接触又对vue感兴趣的小伙伴们来说，这将带来很多困扰。现利用空余时间，进行vue相关知识及应用进行整理。本文章主要是对vue项目从无到有大奖项目进行细致讲解及基础知识的运用