一、装置与引入

element-ui的官网文档:https://element.eleme.cn/#/zh...

首先，咱们在终端中输出npm i element-ui -S，就能够把element-ui下载下来，之后，须要在main.js我的项目入口文件中引入element-ui,留神，这里有两种抉择：

  • 第一就是全盘引入import Element-UI from 'element-ui'
  • 第二种就是按需引入，比如说你须要用到Button,那么你就import {Button} from 'element-ui'
留神咱们之前引入的只是element-ui的组件，然而具体的款式还没有引入，因而须要加上import 'element-ui/lib/theme-chalk/index.css',这个是容易被疏忽的中央，须要强调。

之后还须要申明一下Vue.use(Element-UI),这样咱们才能够在vue的其余组件中应用
集体还是比拟举荐按需引入，毕竟咱们的我的项目中不会把element-ui的全副组件都会用到，只可能最多十几种，所以为了整个我的项目，还是按需引入的好一些

二、配合Vue制作登录界面

1.引入el-form表单

el-form有很多种，然而我的需要是用户登录，那么只须要两个input文本框就好。我间接援用的是官网组件中Form表单的“自定义校验规定”,这个用着不便些。

大抵代码如下，简略的账户和明码验证：

<template><div class="home">    <el-form      :model="ruleForm"      status-icon      :rules="rules"      ref="ruleForm"      label-width="100px"      class="demo-ruleForm"    >      <el-form-item label="账号" prop="username">        <el-input          type="text"          v-model="ruleForm.username"          autocomplete="off"        ></el-input>      </el-form-item>      <el-form-item label="明码" prop="Pass">        <el-input          type="password"          v-model="ruleForm.Pass"          autocomplete="off"        ></el-input>      </el-form-item>         <el-form-item>        <el-button type="primary" @click="submitForm('ruleForm')"          >提交</el-button        >        <el-button @click="resetForm('ruleForm')">重置</el-button>      </el-form-item>    </el-form></div></template><script>export default {  data() {       var validateUser = (rule, value, callback) => {      if (value === "") {        callback(new Error("请输出账号"));      } else {                callback();      }    };    var validatePass = (rule, value, callback) => {      if (value === "") {        callback(new Error("请输出明码"));      } else {        callback();      }    };    return {      ruleForm: {        username: "",        Pass: "",             },      rules: {        username: [{ validator: validateUser, trigger: "blur" }],        Pass: [{ validator: validatePass, trigger: "blur" }],           },    };  },  methods: {    submitForm(formName) {      this.$refs[formName].validate((valid) => {        if (valid) {          alert("submit!");        } else {          console.log("error submit!!");          return false;        }      });    },    resetForm(formName) {      this.$refs[formName].resetFields();    },  },};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.el-input>>> .el-input__inner{  width: 10%;}</style>

这外面有几个问题须要提前说一下：首先最重要就是咱们在援用elment-ui的组件时，应用款式都是默认的，咱们能够批改，然而不能够间接在element-ui的默认款式文件index.css中批改，而是利用到了深度选择器进行款式重写，向下看...

2.款式重写

款式重写中波及到的重点就是深度选择器，那咱们来具体聊聊深度选择器.

首先，vue与Element-ui兼容性很好，然而Element-ui用起来款式无限，所以咱们必须对其外部的css进行肯定的笼罩去更改它。

我用el-input 输入框中的多行文本框的时候

<el-inputv-model="input"rows="15":type="textarea"></el-input>

发现字体始终为宋体且字号很小。于是我加了

<el-inputv-model="input"rows="15":type="textarea"style="font-size:20px;font-family:'Microsoft YaHei'"></el-input>

仍然没有任何变动。

起初想到去笼罩input默认css款式。我关上了node_modules，找到_element-ui@1.4.13@element-ui，点进去关上lib文件夹下theme-default中的input.css，这是el-input默认款式，ctrl+F搜寻font-size，找到了el-textarea__inner

这个外面有默认的font-size:14px;然而不能在这下面进行批改。所以回到你的我的项目网页。增加如下内容：

<style>.el-textarea__inner{ font-family:"Microsoft"; font-size:20px;}</style>

进行笼罩即可，下面控件也不必额定加class润饰。对于单行文本框也能够这样进行批改,退出el-input__inner{}即可。

最初，如果进行上述批改，会发现其余页面的款式也同时会被批改，这个时候须要用scoped和>>>符号进行穿透。

css外面写

<style scoped>.textarea >>> .el-textarea__inner{<!--!important指明优先级，最好加上。--> font-family:"Microsoft" !important; font-size:20px !important;}</style>

3.欠缺登录验证

首先保障后盾服务器须要连贯数据库，并且是运行状态

咱们在验证表单的时候，也就是登录的用户名和明码，除了要合乎前端定制的最根本的填写要求，还要保障和服务器内存储的数据雷同，也就是须要将咱们填写的用户名和明码组成提交给服务器，由服务器来判断并返回具体的status状态码，如果是200代表胜利，否则，失败

<template>  <div class="login_container">    <div class="login_box">      <!-- 头像区域 -->      <div class="avatar_box">        <img src="../assets/logo.png" alt="">      </div>      <!-- 登录表单区域 -->      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">        <!-- 用户名 -->        <el-form-item prop="username">          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>        </el-form-item>        <!-- 明码 -->        <el-form-item prop="password">          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" 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 {      // 这是登录表单的数据绑定对象 admin 123456      loginForm: {        username: '',        password: ''      },      // 这是表单的验证规定对象      loginFormRules: {        // 验证用户名是否非法        username: [          { required: true, message: '请输出登录名称', trigger: 'blur' },          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }        ],        // 验证明码是否非法        password: [          { required: true, message: '请输出登录明码', trigger: 'blur' },          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }        ]      }    }  },  methods: {    // 点击重置按钮，重置登录表单    resetLoginForm() {      // console.log(this);      this.$refs.loginFormRef.resetFields()    },    login() {      this.$refs.loginFormRef.validate(async valid => {        if (!valid) return        const { data: res } = await this.$http.post('login', this.loginForm)        if (res.meta.status !== 200) return this.$message.error('登录失败！')        this.$message.success('登录胜利')        // 1. 将登录胜利之后的 token，保留到客户端的 sessionStorage 中        //   1.1 我的项目中出了登录之外的其余API接口，必须在登录之后能力拜访        //   1.2 token 只应在以后网站关上期间失效，所以将 token 保留在 sessionStorage 中        window.sessionStorage.setItem('token', res.data.token)        // 2. 通过编程式导航跳转到后盾主页，路由地址是 /home        this.$router.push('/home')      })    }  }}</script><style lang="less" scoped>.login_container {  background-color: #2b4b6b;  height: 100%;}.login_box {  width: 450px;  height: 300px;  background-color: #fff;  border-radius: 3px;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  .avatar_box {    height: 130px;    width: 130px;    border: 1px solid #eee;    border-radius: 50%;    padding: 10px;    box-shadow: 0 0 10px #ddd;    position: absolute;    left: 50%;    transform: translate(-50%, -50%);    background-color: #fff;    img {      width: 100%;      height: 100%;      border-radius: 50%;      background-color: #eee;    }  }}.login_form {  position: absolute;  bottom: 0;  width: 100%;  padding: 0 20px;  box-sizing: border-box;}.btns {  display: flex;  justify-content: flex-end;}</style>