关注前端，关注原创

前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！

本文给大家做个参考，什么时候会考虑使用全局状态管理？以及帮助大家理解获取全局状态变量的三种方式。在使用vue的全局状态管理工具pinia时，很多小伙伴可能都会有个疑问，那就是我们从全局状态管理中获取某个变量的值，一共有三个方法：1.直接访问state中的变量2.通过getters访问变量3.通过actions中的方法访问这三个方法有何区别，它们是不是有些冗余，究竟什么时候用哪个方式。本文通过简单的几分钟，教会大家这个基础知识点。

前面我们已经把vue自带的页面删除，也搭建了最简单的router路由，下面就可以真正开发我们自己的项目了，一般而言，很少有人从零开始写代码，博主也是为了完善这个系列博客，才会从零开始，把关键的代码都敲了一遍。哪怕同学们有自己心仪的项目，搭建基础的架构，跟着博主学一遍关键的知识点，也有助于以后优化升级项目，修改别人的代码或者修复bug。跟着博主写一遍，大概率是可以真正把控全局，把vue如何搭建网站彻底搞明白。

前面的文章运行成功后，页面显示如下：在这个页面中，点击Home和About都会切换右面的页面内容，这就是一个最简单的路由。虽然router是很基础简单的插件，但是要完整理解它的各个要点，需要对项目整体有一定理解，前面那篇关于vue项目各个文件目录的介绍，就显得尤为重要了。打牢基础，事半功倍。

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。HTML基础css基础js基础当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。可以直接搜索【中二少年工具箱】，也可通过二维码知乎地址二维码csdn地址二维码头条地址等入口进入，扫码关注。

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。HTML基础css基础js基础当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。可以直接搜索【中二少年工具箱】，也可通过二维码知乎地址二维码csdn地址二维码头条地址等入口进入，扫码关注。

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。HTML基础css基础js基础当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。可以直接搜索【中二少年工具箱】，也可通过二维码知乎地址二维码csdn地址二维码头条地址等入口进入，扫码关注。

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。HTML基础css基础js基础当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。如果上面二维码被禁，可以通过二维码知乎地址二维码csdn地址等入口进入，扫码关注。如果只关注学习vue3的同学，可以不需要过多了解node版本管理工具。

本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。HTML基础css基础js基础当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。由于各平台对专栏文章的支持度不同，所以如果您看到这篇文章的平台，系统学习专栏文章的操作不够丝滑，可以先关注小程序，后续小程序会开发专栏博客功能。如果上面二维码被禁，可以通过二维码知乎地址二维码csdn地址等入口进入，扫码关注。