XH_jing的博客

在 Vue3 项目中，ref 的使用需要注意其初始化时机，以避免在值未赋值时调用方法。通过使用 nextTick、onMounted 等技术，可以有效避免此类问题。

前言不经一番寒彻骨，怎得梅花扑鼻香。感谢小伙伴的陪伴与监督，终于走到了最后一步——项目总结。首先恭喜一下自己，能够坚持看完，希望对你的项目开发有一定的帮助，也希望可以在技术的道路上日益精进。内容总结关于 VueVue 作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用。与此诞生的优秀的开源框架比如 ElementUI，Vant， ant-design-vue 等

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star功能实现公共组件的提取封装目前比较流行组件化开发，组件化开发的好处：方便我们在各个不同的项目中复用代码。当然，我们在项目开发中也一直不断的封装组件来使用，在这里总结一下如何完整的封装一个组件来使用：建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。准备好组件的数据输出。即根据

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现路由配置在前面章节中我们已经介绍了路由的配置，这里就不过多介绍了。发布页面布局实现总结本章节主要实现路由权限的鉴定，需要注意以下几点：守卫路由路由元信息的使用消息页面路由权限的实现本地缓存 sessionStorage 的使用上一章节： 18. 用户登录权限以及本地缓存的实现下一章节： 20. 项目整体介绍：Vu

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果未登录时跳转至登录页面：功能实现路由权限（路由守卫）路由守卫：就是当前路由正在发生变化时，就会触发。vue-router 提供的导航守卫主要是用来通过跳转或者取消的方式来守卫导航路由，包括全局守卫、路由独享守卫、组件内守卫等几大部分，对这一块不太熟悉的小伙伴可以去官网看一下：Vue Router 官网简单的说，导航守卫就是路由跳转过程中的一些钩子函数

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现设置项目整体背景色(补充)发现项目中大部分页面都是统一的黑色背景,为了方便,我们可以在 App.vue 中设置背景色<style lang="less">#app { height: 100vh; background-color: #101821;}</style>创建消息页面路由我们之前都已经设

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现创建修改信息页面在 src/views/mine 下创建 updateInfo.vue 页面updateInfo.vue<template> <div> <Header :title="修改名字" hasLeft hasRight rightText="保存"></Header>

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现“我的”界面设计mine/index.vue<template> <div class="mine"> <!-- 顶部背景模块 --> <div class="mine-top" :style="bgPic"> <!-- 右上角菜单按钮 -->

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现“我的”界面设计mine/index.vue<template> <div class="mine"> <!-- 顶部背景模块 --> <div class="mine-top" :style="bgPic"> <!-- 右上角菜单按钮 -->

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果success 效果：error 效果：功能实现自定义全局 toast 组件在 src/common/components 目录下，创建 toast 文件夹并新建toast.vue、toast.js文件toast.vue 创建弹窗样式<template> <div class="toast-box"> <

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现引入 Vuex什么是 Vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗点说：此时有一个根组件和两个子组件，如果根组件与子组件之间通信，可以通过 props 传值的方式来实现；但是如果想要让两个子组件进行通信，此时实现起来就

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现设置路由跳转登录页面src/router/index.js在原有基础上新增以下代码片段：{ path: '/sign', name: 'Sign', component: () => import(/* webpackChunkName: "sign" */ '../views/Sign.vue'),},

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果前面几个章节已经将该 webApp 最基本的视频播放的相关功能基本完成了 ，但是大部分数据都是写死在vue文件中，现在我们要对数据进行处理，本章节先采用 mock 数据进行开发。功能实现本地 mock 数据vue-cli 3 之后 在不修改 vue.config.js 配置文件的情况下，本地资源需要放到 public 下才能被正确的加载到。在 publ

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现控制视频的播放与暂停在 methods 中声明两个方法，play()播放方法、stop()暂停方法，控制视频的播放与暂停Videos.vue部分代码：methods: { // 播放 play() { this.$refs.videoPlayer.player.play(); this.palying = true;

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现首个视频自动播放当你打开抖音APP 时，它首页的视频是自动播放的。我们不能直接修改 vue-video-player 上的 options -> autoplay，因为 autoplay 为 true 的话，则所有的视频都会自动播放，我们只需要让数组中的第一个播放就行了，所以我们传递数组的所以给 video 组件，在 video 组件内判断 如

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现点赞评论分享以及唱片组件创建创建 RightBar.vue<template> <div class="right-bar"> <div class="bar-item"> <div class="author-item"> <img src="@/as

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现视频详情页基本实现创建 InfoBar.vue<template> <div class="info-bar"> <div class="infobar-item">@逗逗飞</div> <div class="infobar-item">vue实战 视频类webApp

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果功能实现路由配置问题记录总结上一章节： 顶部导航条实现下一章节： 顶部导航条实现项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）项目仓库地址，欢迎 Star。有任何问题欢迎评论区留言讨论。...

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实现效果模块分析我们从抖音app上截图一张，来分析此部分的实现方式。我们可以看出，该模块内容的顶部标签栏有三部分组成：直播、菜单项、搜索。此部分可以使用嵌套路由来进行路由开发，路由规则为：home -> index -> follows || recommend。模块开发修改路由问题记录总结上一章节： 底部状态栏实现(实现原生AP

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star实习效果模块开发问题记录注意：由于我们使用了 eslint 进行规范检查，所以在项目开发过程中一定要注意代码规范，下面我注意总结了在开发过程中会碰到的几个代码规范问题。eslint 检测报错 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style原因：项目代码做了 eslint

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。项目仓库地址，欢迎 Star项目基本骨架搭建项目整体架构图片引用自 https://xiaozhuanlan.com/topic/3682047591项目目录说明|- assets 资源文件夹 |--- fonts 图标字体 阿里图标字体 |--- icons

如果想看该实战系列的其他内容，请移步至Vue.js 实战系列之实现视频类WebApp的项目开发。基础环境搭建：Vue-cli 脚手架搭建环境vue create dou-yin-app会提示让选取一个 preset，这个地方我们选择“Manually select features”来手动选取需要的特性；然后 Check the features needed for your project: Babel、Router、Vuex、CSS Pre-processors、Linter；具体

前言最近利用空余时间打算进行一个完整的项目实战，所以借此机会整理一个Vue实战系列，本项目主要是 从 0 到 1 搭建一整套完整的实战项目，以及在开发过程中对于很多技术细节进行再学习和纠错处理。特整理本实战系列，如果有想法我小伙伴欢迎一起学习进步。项目地址为：GitHub 欢迎大家 Star。项目介绍使用 vue.js 作为此项目的技术栈，通过项目脚手架搭建、数据mock、架构设计、代码编写、编译打包，来了解前端开发的全流程。项目中的代码规范致力于编写高可维护，易于扩展的前端高质量代码，欢迎大家一