VUE3+Element-Plus开发一个简单登陆页

VUE3+Element-Plus开发一个简单登陆页，并发送异步请求

1、安装element-plus组件库

element-plus官方指南链接
https://element-plus.org/zh-CN/guide/installation.html

安装组件库

 npm install element-plus --save

安装自动导入的插件

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.ts的plugins中添加相关插件

import {
    defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
   
  // ...
  plugins: [
    // ...
    AutoImport({
   
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

页面代码

<template>
  <div class="login-container">
    <el-container class="main-container">
      <el-main class="el-main">
        <h2>登录h2>
        
        <el-form :model="loginForm" :rules="rules" ref="LoginFormRef"  label-width="80px" class="login-form"