使用Element改版登录页面

Vue项目实战系列

主要内容：

1. 介绍Element

1 任务概述

前面我们已经开发了一版登录页面，基本上算是素颜了，在这个靠颜值吃饭的社会，素面朝天肯定不行，一定要开启美颜效果，要想达到即美颜，又不要花费太多的时间，只能借助一些组件。本节将教你使用Element来美颜我们的登录页面。

2 Element简介

官方是这样定义Element的：

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

element网站：

https://element.eleme.cn/#/zh-CN

具体这东西怎么样，能不能达到既美颜，又节约时间的效果，那就要看我们下面的使用了。

3 使用Element

3.1 安装Element

在终端运行如下命令安装Element组件：

npm i element-ui -S

命令说明：

• i等价于表示install
• -S等价于–save，表示在 package.json 文件中记录下载包的版本信息

运行结果：

PS E:\vue_workspace\gdtrain> npm i element-ui -S
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@2.6.11 postinstall E:\vue_workspace\gdtrain\node_modules\babel-runtime\node_modules\core-js        
> node -e "try{require('./postinstall')}catch(e){}"
...
此处省略2千字
...
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ element-ui@2.13.0
added 9 packages from 8 contributors and audited 27113 packages in 24.42s
found 0 vulnerabilities

3.2 引入Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们这里是完整引入。

我们需要在main.js中添加引入Elment组件的代码，下面是main.js的完整内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入Element组件及其样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

var axios = require('axios')
axios.defaults.baseURL = '/api'

Vue.config.productionTip = false

Vue.prototype.$axios = axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

代码说明：

• line6：导入Element
• line7：导入Element样式
• line 9：全局注册ElementUI插件

3.3 制作登录表单

我们可以访问Element主页，找到我们要的组件，然后适当修改，你可以访问下面的链接：

https://element.eleme.cn/#/zh-CN/component/

然后找到表单组件：

你可以在显示代码中查看表单的代码，由于上面的表单过于复杂，我们的登录表单要简单很多，因此只要抽取一部分内容即可，下面就是我们的表单代码：

<template>
  <el-form>
    <h3>登录系统</h3>
    <el-form-item>
      <el-input v-model="loginForm.userName" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type='password' v-model="loginForm.password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

代码说明：

• 你需要打开Login.vue文件，将templete部分编辑成上述代码，其他部分不要改动
• 我们需要将表单包围在el-form中
• 输入元素包围在el-form-item中
• el-input：输入框，如果是密码框则指定type为password
• el-button：按钮

页面效果：

我们的表单已经初步美颜成功，但还不够有品位，我们需要给它套个边框，然后居中显示，套个边框，你可以自定义样式，如果你很懒，就直接套在一个卡片中：

<template>
  <el-card class="box-card">
    <el-form>
...
    </el-form>
  </el-card>
</template>

你可以从下面的链接中找到card容器，并进行参考：

https://element.eleme.cn/#/zh-CN/component/card

显示效果：

你会发现上面的card容器使用class=box-card绑定了一个样式，因此你可以通过这个样式调整宽度，并居中，你需要在Login.vue的style部分添加如下代码：

<style>
.box-card {
  margin: 100px auto;
  width: 400px;
}
</style>

代码说明：

• line2 为class=box-card绑定样式
• line3：上下外边距为100px，左右自动分配，就相当于上边距100px，左右居中
• line4：限制宽度

最终效果：

至此，我们的登录页面就完成了，看上去顺眼多了，输入用户名和密码，然后点击登录按钮，能够正常跳转到主页以前的功能没有受到影响，这样就算告一段落了。

下面是Login.vue的完整代码：

<template>
  <el-card class="box-card">
    <el-form>
      <h3>登录系统</h3>
      <el-form-item>
        <el-input v-model="loginForm.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.loginForm.userName)
      console.log(this.loginForm.password)

      this.$axios.post('/login', {
        userName: this.loginForm.userName,
        password: this.loginForm.password
      })
        .then(resp => {
          if (resp.data.code === 0) {
            console.log(resp.data.user)
            this.$router.replace('/index')
          } else {
            console.log(resp.data.msg)
          }
        })
        .catch(failResponse => { })
    }

  }

}
</script>

<style>
.box-card {
  margin: 100px auto;
  width: 400px;
}
</style>

4 总结

使用Element构建的登录会帮你快速完成专业的UI，你首先需要通过npm安装Element组件，然后在main.js中全局引用，最后在具体的页面组件中使用。

通过使用Element，拷贝和修改组件代码，你已经发现vue组件的大致规律，vue组件，包括Login.vue也是一样，通常是界面模板template，脚本script和样式3个部分构成。

我们后面要完善的内容是进行表单验证。