element-ui组件的运用（一个残缺的后台管理系统demo）

1.登录组件

<template>

    <div class="login_container">

        <div class="login_box">

            <!-- 头像区域 -->

            <div class="avatar_box">

                <img src="../assets/heima.png" alt="">

            </div>

            <!-- 登录表单区域 -->

            <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules" ref="loginFormRef">

                <!-- 用户名 -->

                <el-form-item prop="username">

                    <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>

                </el-form-item>

                <!-- 密码 -->

                <el-form-item prop="password">

                    <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>

                </el-form-item>

                <!-- 登录和重置按钮区域-->

                <el-form-item class="btns">

                    <el-button type="primary" @click="login">登录</el-button>

                    <el-button type="info" @click="resetLoginForm">重置</el-button>

                </el-form-item>

            </el-form>

        </div>

    </div>

</template>

<script>

export default {

  data () {

    return {

      // 这是登陆表单的数据绑定对象

      loginForm: {

        username: 'admin',

        password: '123456'

      },

      // 这是表单的验证规则对象

      loginFormRules: {

        // 验证用户名是否合法

        username: [

          { required: true, message: '请输入登录用户名', trigger: 'blur' },