MVC & MVVM学习 &VUE学习 & springboot小型项目开发（续上一篇）UI优化篇

1、安装Element

搬运自官方文档https://element.eleme.cn/#/zh-CN/component/quickstart

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。按需引入可以参考官方文档，组件列表包括以 components.json 为准

¶完整引入

在 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)
});

二、优化登录页面 

1.使用form组件

修改 Login.vue 的<template>内部代码添加form组件：

    <el-form class="login-container" label-position="left"
             label-width="0px">
      <h3 class="login_title">系统登录</h3>
      <el-form-item>
        <el-input type="text" v-model="loginForm.username"
                  auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password"
                  auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
      </el-form-item>
    </el-form>

<el-form> 里面可以放置 <el-form-item>，<el-form-item> 里面再放置其它的内容，比如 <el-input>，关于 <el-input> 的属性，可以查阅 Input 的文档，<el-button> 亦然。

2.添加样式

还是在login.vue中添加代码，放在最后就可以：

<style>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

</style>

访问http://127.0.0.1:8080/#/login发现上端有一块空白

在浏览器按F12进行debug，可以看到上端有一块60px浮动，查找代码发现app.vue中

有一处<style>

注释掉即可解决问题。

下一章（拦截器）。