1. 解决路由守卫实现基础登录校验功能

只有当登陆的时候才能访问首页，否则禁止访问首页，在router中 index.js 中通过 beforeEach 实现，beforeEach是每次在路由跳转前都要执行这个方法，其中有三个参数to,from,next。 to 指的是要跳转到哪个页面的信息，from 指的是从哪个页面跳转的信息。handleLogin函数中data中的 errno 表示返回的错误个数，如果是0就表示请求发送成功，跳转到首页。登陆成功后 isLogin 登录状态就是 true。

2. 解决图片防抖：因为图片加载的太慢，所以会产生抖动，通过css的方法去解决它：我们先计算一下图片的高宽比，得出是0.254，那这里给个底部内边距百分之25.4指的就是屏幕宽度的百分之25.4，又因为图片的宽度和屏幕宽度一样，所以这就相当于图片的高度。所以我们这么想，就在图片没加载出来之前就会把位置占住。这样就实现了防抖效果。

test

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img {
    width: 100%;
  }
}

3. 解决使用 axios 发送登录 Mock 请求

在前端调用接口，和后端做交互。post 请求中还需要把请求的数据返给后端接口，返回内容的格式设置为 json ，因为 fastmock 是这么要求的。请求函数用async 和awit封装，async 是个异步函数，返回的是一个 Promise 对象，await 可以认为是在等待一个 async 函数完成，等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值。

4. 通过代码拆分增加逻辑可维护性

各种函数都放在了 setup 中，但是这样会让我们的 setup 函数非常长，如果项目做到后面我们要在里面找某一个函数或者变量的时候，都很麻烦，如果把关于逻辑的数据和方法都放在 setup 外面的一个函数中这样再把这些函数在 setup 中接收，在 setup 中我们只关心整个页面的实现逻辑就行，这样整个代码的维护性和可读性都大大提高了。

5. 多出的部分如何用省略号表示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; //ellipsis:当对象内文本溢出时显示省略标记(...)