Vue3 + element-ui + axios + sessionStorage 搭建简单的登录接口调用

1、安装Vue3.x
npm install -g @vue/cli # OR yarn global add @vue/cli

2、npm install axios --save

3、npm i element-ui -S

Login/index.vue

<template>

  <div class="login">

    <div class="login_form">

      <h3>系统登录</h3>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">

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

          <el-input type="input" prefix-icon="el-icon-user" v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>

        </el-form-item>

        

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

          <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.passWord" placeholder="请输入密码"></el-input>

        </el-form-item>

 

        <el-row>

          <el-col :span="12">

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

              <el-checkbox v-model="ruleForm.rememberNumber">记住账号</el-checkbox>

            </el-form-item>

          </el-col>

          <el-col :span="12" style="text-align: right;">

            <el-button type="text">忘记密码</el-button>

          </el-col>

        </el-row>

        <el-form-item>

          <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')">登录</el-button>

          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->

        </el-form-item>

 

      </el-form>

    </div>

  </div&