1、创建项目，使用如下插件

使用如下依赖：

2、登陆页面

(1)先安装ElementUI插件和依赖

以上方法是官网介绍的引入方法，需要写三行代码引入Element-UI，又或者用以下方法引入：

import './plugins/element.js'

把之前的三行代码抽出来放到一个叫element.js的文件中，并在main.js中加入以上代码，可以代替之前的三行代码，一行代码实现引入Element-UI，这是使用脚手架引入Element-UI插件时自动生成的~很方便。

在正式写代码之前，带大家了解一下脚手架的基本原理。

提问：脚手架是如何把index.html和main.js关联起来的？

在工程文件中使用main.js来加载App.vue文件，但没有写加载main.js的代码，而index.html中只有一个自定义标签app，那么工程是如何加载到main.js文件的呢？

我们来看以下源码

可以看到在vue-cli的源码当中，以app为入口，引入了main.js文件。

那么index.html和main.js、App.vue的关系是怎么样的呢？

看下图：

(2)画登陆页面

由于画登陆页面对大家来说实在是一间很简单的事情，只是画得好看需要一点操作而已，所以这里就复制Login.vue的样式和页面元素，然后发现样式格式不兼容，需要安装sass和sass-loader

快捷方法：直接复制依赖到package.json中，然后按Alt+回车自动按照对应版本的依赖

注意：此处安装最新版本的sass将会报错

接着把黄色波浪线的变量和方法逐一定义在Login组件内，由于<svg-icon>标签涉及到index.vue组件，这里先注释掉三行该标签。

然后记得把App.vue的样式都删掉，然后再main.js中导入全局样式，否则会出现无法铺满全屏的问题。

import './assets/styles/index.scss'

又或者在index.html中添加样式，把html, body, #app的height设为100%也可以，但是懒人肯定首选直接导入全局样式啦~

/*若不导入全局样式，可以在index.html中设置样式*/
body, html, #app{
    height: 100%;
}

(3)获取验证码：getCode()方法

原项目是封装了一个js，这里就直接写，更容易理解

先安装axios依赖， npm install axios

再在main.js中用import导入，然后赋值给Vue.prototype.$axios

由于刚开始验证码无法获取，导致二维码的图片无法显示导致无法点击，于是在它下面定义一个按钮，点击事件同样是触发getCode()方法。

由于这里使用的axios是没有经过封装的，所以地址要写全

getCode(){//获取验证码
  this.$axios.get('http://localhost:8000/auth/code').then(res=>{
    this.codeUrl = res.data.img
    this.loginForm.uuid = res.data.uuid
  })

然后获取验证码的方法就写好了！接着来着登陆的方法！

(4)处理登陆请求：handleLogin()方法

先实现一个简单的登陆，满足一下自己

handleLogin(){//处理登陆过程
  this.$axios.post('http://localhost:8000/auth/login',{
    username: 'admin',
    password: '123456',
    code: '',
    uuid: ''
  }).then(res=>{
    console.log(res);
  })
}

点击登录，发现报400，查看后端发现是解密失败，于是把后端代码中解密的那行代码注释掉，然后写一行不执行解密的代码。

再次点击登录，成功返回结果！

(5)密码加密

接着我们来进行加密操作

先把加密的js文件复制过来，感兴趣的同学可以自己去生成一个，自行生成的同学要记得后端也要同步修改密钥噢~

然后在handleLogin方法中添加如下代码：

//密码加密
this.loginForm.password = encrypt(this.loginForm.password)

再次登陆

加密成功！

(6)简单创建跳转页面

在完善登陆功能之前，让我们先做好跳转页面，登陆成功后连页面都没跳转，总感觉像没有登录成功一样对不对？

我们新增一个Home.vue组件，然后设置它的对应路由，然后在Login.vue中添加跳转的代码：

this.$router.push('/dashboard')

然后再次登陆

跳转成功！

这只是完成了一小步而已。我们现在的登陆功能距离完善还有挺长的一段距离。

(7)添加表单校验

我们注意到我们的表单是没有校验的，即使你什么都不输，也可以进行登陆请求，这是不符合要求的，接下来我们加一下校验规则。

loginRules: {
  username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
  password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
  code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
}

此时页面已经生效了，但是还不够，点击登录还是会发送请求，于是我们需要这样处理：

handleLogin() {
  this.$refs.loginForm.validate(valid =>{
    if (valid){//如果表单校验通过
      //密码加密
      this.loginForm.password = encrypt(this.loginForm.password)
      this.$axios.post('http://localhost:8000/auth/login',this.loginForm).then(res => {
        this.$router.push('/dashboard')
      })
    }
  })
}

在发送请求之前先调用表单的validate方法进行校验，校验通过才发送请求，这样校验功能才算添加成功！

(8)添加拦截器，提示请求失败信息

我们发现登陆失败的时候，页面一点反应都没有，是不是很不合常理？我们需要在获得后端响应之后对后端返回的信息进行处理并显示出来，于是就需要使用拦截器。

首先，创建一个叫request.js的文件，文件名可以随意起，叫request比较专业一点，跟原项目保持一致。接着导入axios，并创建实例，然后给实例添加拦截器即可。

拦截器管理器中的use方法有两个可选参数，两个参数都是函数，前者代表成功，后者代表失败。

在request.js中添加如下代码：

//导入axios
import axios from "axios";
import Element from 'element-ui'
//创建axios实例
let request = axios.create()
//给axios实例添加拦截器
request.interceptors.response.use(response=>{
    return response;
}, error => {
    Element.Message.error('请求失败了 '+error)
    return Promise.reject(error)
})


export default request

然后故意登陆失败：

响应拦截成功！至于请求拦截，在添加token的时候会讲到~

注意：初学者很容易会忘记return，如果不return response或者不return Promis.reject()的话，调用者的then方法中会拿不到res或者error。

未完待续~B站有我录的教学视频~在扩展链接~