Vue+SpringBoot项目学习（三）：登陆页面

本来是做java的，没想到在前端上费的力气这么大，虽然感觉有点偏，但是又觉得前端知识还要有一定的掌握，所以还是要继续学习。做这个我也挺挣扎的，主要是对前端的逻辑代码看不懂，环境又让我玩坏了，又要重新折腾，做一天也没整出来了啥，不知道逻辑代码怎么写，所以这个就先把页面写出来吧，逻辑代码往后站。

安装element也比较简单，我们可以直接去查它的官方文档，找到引入它的办法。打开官方文档，左侧边栏找到安装，可以看到有两种方式，一种是npm安装，一种是cdn引入，我这里就是用npm安装。
npm i element-ui -S
在idea中的终端执行这个命令即可，或者在项目目录下cmd命令行中执行也可以。如果提示警告修复，可以按照给出的命令进行修复一下。
安装完之后，需要引入，再次打开官方文档，左侧侧边栏点击快速上手，有几种方式，我这里就完整引入，在main.js中进行操作，添加四行代码：
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
在new Vue中添加render: h => h(App)

首先去除掉原始项目中的Vue图标，在asstes文件夹中删除logo.png图片，然后在App.vue中删除代码，这样图片就删除了。
结构我就学习Evan-Nightly“白卷”的结构，在cpmponents文件夹下新建Login.vue，作为登陆页面，在cpmponents文件夹下新建文件夹home，在home中新建AppIndex.vue，作为首页组件。

接下来开发Login.vue组件，我使用的是Element官方文档->Form表单->自定义校验规则这个表单作为我们登陆的模板，把这段代码复制，然后粘贴到Login页面中，需要注意的是，最好不要直接全部复制，前面的html代码复制到