使用elementPlus中的Container 布局容器来布局。：外层容器。当子元素中包含或时，全部子元素会垂直上下排列， 否则会水平左右排列。：顶栏容器。：侧边栏容器。：主要区域容器。：底栏容器。又又又完成一节。首页的整体整体结构有了，剩下的就是一步步细化。左侧菜单导航 头部的一些功能按钮（全屏/引导页/头像/退出等）再就是内容了

在 Vue 中，路由守卫（Route Guards）是一个用于控制路由访问的机制。它们可以在路由被访问之前或之后执行一些操作，例如检查用户身份验证或权限。Vue Router 提供了几种类型的路由守卫：全局前置守卫、全局后置守卫、路由独享的守卫。这节我们主要配置下项目得路由守卫。实现得功能：1》只有登录才能访问系统2》定义白名单（没有登录的时候可以访问）to（目标路由对象）、from（当前路由对象）和next（一个函数，用于执行导航）。可以根据需要决定是否调用next()

Axios 请求拦截器是一种用于拦截和处理 HTTP 请求的机制。通过使用请求拦截器，你可以在请求被发送到服务器之前或之后执行一些操作，例如添加通用的请求头、处理认证、处理请求和响应数据等。通过使用请求拦截器，你可以方便地处理和修改 HTTP 请求，而无需在每个请求中重复相同的逻辑。这有助于提高代码的复用性和可维护性。

Vuex 是一个 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的主要用途是集中存储管理应用的所有组件的状态，并通过定义好的规则保证状态以一种可预测的方式发生变化。这样有助于我们更方便地管理、跟踪和调试状态的变化，从而提高了代码的可维护性和可测试性。管理全局状态：在多组件的复杂应用中，你可以通过 Vuex 统一管理全局状态，例如用户认证、窗口大小、动态主题等。

完善登录页面密码框输入的细节响应拦截器密码框完成！响应拦截器完成！当然还有很多细节待完善比如回车执行登录等，有兴趣的可以继续，就不在这记录了。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~

解决axios请求错误报错Uncaught runtime errors每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~

这节课主要介绍利用axios发起登录请求。项目的重点来了，axios配置使用。关键的几节，花个几分钟几十分钟来了解搞定。

这节主要介绍项目配置mockJs并模拟实现接口。并介绍了Mock相关的方法和常用语法。接下来会介绍如何使用配置axios，用axios请求登录接口并接收到接口返回的数据。拦截ajax请求，生成伪数据应用场景:在没有后端支持的情况下，自己生成数据当然主要是在工作中,后端已经出接口文档,还没有实现数据由前端依照接口文档模拟伪数据,实现前端开发功能Mock的配置完成，很简单吧。没有废话，满满的干货

继续登录页面，这节主要介绍表单的验证。登录页面是我们的重重之重，将会用大量篇幅介绍完善登陆页面。涉及到密码是否显示、登陆接口、vuex、cookie等登录页面的验证已经完成。

上一节我们安装并使用了elementPlus中的icon，这一节我们封装个自己的Icon组件，设计师或者在其他网站上下载个svg导入到根目录，结合我们的组件就可以用在页面上了。安装svg-sprite-loader创建自己的svgIcon组件。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~

vue3 elementPlus 用户登录页面

初始化项目，导入默认reset.scss 、variables.scss及mixins.scss等并修改main.js引入样式每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

vue3与vue2的区别及特性。简单了解vue3,每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

基础工作准备完毕，从这节开始正式进入项目。官网地址一个 Vue 3 UI 框架 | Element Plus (element-plus.org)按需导入elementPlus并测试。其中有两个注意点：一个是config.js的配置内容；一个是安装的版本号。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

安装并配置elementPlus报错。

新创建的vue3项目，根据elementplus官网安装步骤进行按需导入安装，运行项目报错。

代码格式化强制执行对src目录下的js、vue文件自动进行代码格式化每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

在每次Git提交时，强制严格执行制定的规范。终于完成 强制性的commit的配置2-6节主要介绍了项目前期的准备工作，便于项目以后管理。涉及到代码格式化、仓库管理、Git提交规则、代码规范。有基础的同学可以忽略跳过。从第八节开始正式进入项目。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

多人开发项目时，每次Git提交都不明确提交了什么，增加功能？修复bug？修改了代码格式？没有哦规则。那我们制定制定提交类型及如何写提交信息的规则，提交强制必须遵守~每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

使用Git管理代码具有许多优点，特别是对于大型项目或需要多团队协作的项目来说更是如此。它提供了强大的版本控制、高效的协作、可靠的代码备份等功能，为开发人员提供了便利和灵活的工具来管理代码。按照步调走一直走下去

代码格式化是指在代码中添加空格、换行和缩进来使其更易于阅读和理解的过程。代码格式化配置完毕！遵循一致的格式化风格可以提高代码的可读性和可维护性。

例如：初始化vue3项目例如：初始化项目完成，可以保存预设。