vue-element-admin第一篇：vue-element-admin初始项目

1、事前准备

• 下载项目：https://gitee.com/mirrors/vue-element-admin.git
• 执行代码：
  • npm install
  • npm run dev
  • OK，准备工作完成，如果有报错，请移步到度娘那里去

2、先分析模块

（1）先看整体架构

• 下载下来是这样的
  
• 看所有的模块，以后要进行哪个模块的练习，就去练习哪个模块，都是在views下面的
  

（2）以登录模块为例分析

• 打开这个文件
  

• 看用户名
  

• 看密码
  

• 看登录按钮
  
  它触发的是handleLogin【接下了去看这个方法】

• 分析我们的登录方法

• 找到这个【看清楚是在store下面的啊，不要去api下面找】
  

• 仔细看里面的方法可以知道有login，loginout，getInfo等方法
  
  他们都是来自这里
  

• 去/api/user.js里面康康
  
  原理如此：我们可以这样改动【配置你自己的后端的请求地址，也就是你后端上面的requestcontroller里面写的】
  

  • 这里我们可以看出来，这些login方法，还是logout方法，还是getInfo方法都是返回的是Request的对象，它是封装在
    utils下面的Request.js文件里面的，进去康康

• 记录后发现是这个样子

  • 这个baseURL都知道是配置什么的吧【就是application.yaml或者application.properties里面的那个地址，这样写你的地址后，你的前端和后端就是真的联系起来了】，比如我修改一下我后端写的
    

（3）一个问题

各位看到这里了的话，相信各位都是理解了，有没有真的理解呢？那我来出一个问题吧！

• 首先看它之前项目的样子
  执行：npm run dev
  
• 看样子【不要给我说这个几个单词都不认识】
  
  问题：它上面只有的是用户名和密码，而正常使用的时候都是有验证码的，那如果我要添加验证码的那个输入框，并且要把所有的逻辑都编写好，你会吗？？？？？？