如何实现登录页

针对已下载好脚手架的

在 src 目录下新建一个 views 文件夹
views 目录下创建一个 登录页的页面(login.vue)

** 1.1 配置路由**
在 src 目录下创建一个 router 文件夹 配置路由
在router 目录下创建一个 index.js 配置路由

**在 1.2 main.js 中引入 路由

** 1.3 在 App.vue 中映射组件**

在 2 login.vue 中写登录页的结构

** 2.1 使用 Element 框架中的 Form 表单 主要是添加输入框和密码框 和 input 输入框 使用的是在 输入框和密码框 内展示的 图标 **

使用表单验证 在防止用户犯错的前提下，尽可能让用户更早的发现并纠正错误

** 2.2 在data 中定义的数据和 和对表单输入框的规则**

表单项属性

prop

required

message 提示信息
rules 验证规则

trigger 触发时机

3 加登录按钮 使用 element-ui 中的 Button 按钮

3.1 添加到 el-form 表单下

3.2 给登录按钮添加一个点击事件

3.3 在 methods 中使用 自定义的方法 点击按钮是触发

3.3-1 在表单中右一个 validate() 的方法可以进行对用户数据的验证，所采取的规则救赎 rules 规则 。 他有一个参数是一个回调函数，当验证结果的时候 ，就会调用这个函数并传一个验证结构，结果为ture, 说明就是验证通过 则就是验证失败 只关注 框框部分即可 代码如下

3.3-2如果通过验证才会触发一下代码

3.3-3 在框架的 表单项有一个方法 用户获取焦点的时候触发

** 4 封装基准路径**

4.1 下载axios

 npm install axios

4.2 在src 目录下新创建一个文件夹 utiils 在utils 中创建一个 封装基准路径用的 myaxios.js 文件夹

4.3 在封装一个 接口文档

4.4 在login.vue 组件中引入

4.5 使用 async 和 await 发送请求 async 要放在await 所在的函数里
如果验证通过就跳转页面

在登录成功之后把 token 值储存在本地

5 添加导航守卫
5.1 因为除了登录页其他都需要登录后才能访问 所以在导航守卫验证有没有token 如果没有就重定向到登录页

5.2 在配置路由的时候添加导航守卫 在src/router/index.js 的文件 中添加