在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： <ul class="g-contaner"> <li></li> <li></li> </ul> ul { width: 500px; display: flex; flex-d…

上一节中，我们已经介绍了Vue3中的核心功能之一的路由系统，并根据原理简单的实现了前端路由，到目前为止，我们已经学习了Vue3中的组件和路由，除了组件和路由，Vue中还有另外一个重要的部分——那就是数据。 我们都知道Vue框架是通过数据驱动的，所以数据的重要性不言而喻，那么有哪些数据需要管理又是如何进行管理的呢？本节我们就来聊一聊Vue3中的数据管…

上一节中我们介绍了Vue3中的过渡与动画，最后介绍了如何在切换组件的时候增加过渡动画，当我们切换login和home页面的时候，会发现浏览器路径后面多了个/#/login、/#/home，并且在页面不刷新的情况下，就更新了局部的组件内容，而这就是由我们的路由系统控制的。 路由系统是Vue项目中的核心功能，包括在我们前面的章节中，也曾多次的涉及到路由…

在前两节中，我们已经完整的介绍了Vue3中的组件化开发以及如何去灵活地使用组件，在掌握了组件相关的开发技能后，相信对于大家来说，实现一个自定义的组件已经不是什么问题了。 虽然在技术上没有什么难点了，但我们实现的组件相比与ElementUI这些成熟的UI框架来说，我们会发现在一些细节上还存在差距，还是以我们的弹框组件为例，ElementUI中的弹框在…

上一节中，我们已经介绍了如何使用组件化来开发你的项目，并实现了一个简单的弹框组件，在我们的日常开发中，类似这样的弹框组件，其实是有很多的细节需要进行处理的，而我们一般会引入做的比较成熟的第三方UI框架，比如ElementUI。 当我们在调用UI框架中的组件时，会发现常用的调用方式有两种，一种是直接在页面中嵌入组件： <el-dialog v-…

在上一节中，我们已经搭建了一个简单的Vite+Vue3的项目，并且引入了路由管理，实现了路由的切换跳转，那么接下来我们就要讲一些在实际开发中会使用到的东西，进一步完善我们的Vue3知识体系。 组件化一直都是Vue的重要组成部分，当然不仅仅在Vue中，可以说在任何一个项目中，我们都可以找到组件化的影子，既然组件化这么的重要，那么我们今天就来聊一聊Vu…

从上一节中，我们已经从原理上分析了Vite为什么这么快，相信大家都迫不及待的想用Vite来搭建一个项目了，本章节中，我们会手把手地带大家从头开始使用Vite+Vue3搭建一个项目。 在这个过程中，我们会逐渐地接触到Vue的组件化开发、VueX、Vue-router等全家桶内容，我们会在接下来的几节中依次给大家讲解，这也是一个渐进式的过程，最终帮助大…

现在前端工程化的概念大行其道，研发基本上离不开模块化，框架我们有React，Vue，对应有jsx、vue文件，样式文件也有less，sass等等，这些东西浏览器本身是不认识的，但我们最终都要把它们统一起来，可以放到任意一个浏览器中去运行，那么我们就需要使用“前端构建工具”来帮我们完成这个工作。 一个高效的构建工具对前端来说是非常重要的，不管是项目冷…

经过上一节的学习，我们已经明白了，什么样的项目可以升级到Vue3，以及升级到Vue3的话我们还需要掌握的一些非兼容性改变，在满足了这两个条件后我们就可以来开始项目的升级了。 理论知识还是需要实践来支持的，所以本节我们开始以一个简单的Vue2项目为例，带大家一起走一遍Vue3的升级。 Vue2项目的基础配置 首先，我们来搭建一个简单的Vue2项目，p…

从前面的章节中，我们已经学习了Vue3的新特性和新语法。准备开新项目的同学，已经迫不及待地使用Vue3来进行开发了吧。那对于正在使用Vue2的同学，如果想要升级到Vue3，是不是直接更换版本就可以呢？ 遗憾的是，并不是直接更换Vue的版本就可以的，我们都知道在Vue3中做了大量的重构，所以有部分内容对于Vue2来说是不兼容的，Vue2的代码直接升级…