Vue小模块之用户登录 使用Element美化网站和实现验证

引入Element

首先用npm安装Element

npm i element-ui -S

在目录src/element/下创建文件index.js

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

Vue.use(ElementUI)

然后在main.js中添加以下代码进行引入

import  './element'

至此就完成了element的引入，后面就可以直接在代码中使用element组件

整体布局

–login.vue–

<template>
  <div class="homeBox">
  <div class="login-container">
    <el-form :model="ruleForm2" :rules="rules2"
             status-icon
             ref="ruleForm2"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username"