3、Vue+ElementUI制作用户登录页面

前面两篇简单了解了一下vue和SPA，现在来用Vue+ElementUI做一个用户登录页面，ElementUI是Element出的一套针对vue的UI库，类似的UI库非常多，ElementUI只是其中一个，只是在GitHub上ElementUI是使用人数最多的，也可以使用其他的UI库，ElementUI官网地址：https://element.eleme.cn/#/zh-CN/component/installation

使用npm的方式安装
npm i element-ui -S：i表示install安装、-S表示-save安装在package.json文件下的dependencies下
在main.js中引入如下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

下载成功后在package.json文件下多了如下内容，如果有一天要进行版本升级，只需要修改一下后面的版本号，修改完成后执行npm install即可

然后新建一个Login.vue组建，把它引入到index.js页面并且定义到路由表routes中
App.vue页面如下，这样在首页中就只有Login.vue页面了

直接使用ElementUI中的card中的基础卡片
flex布局：弹性盒子布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
登录页面Login.vue详细代码如下，具体说明在注释中

一个vue+ElementUI的登录页面就算写好了，效果如下