【无标题】vue3 登录页的源码 bug：注意element-plus 的pluginsplugins/elements.js 其中一句引入路径有问题_vue修改 element plus 引用路径

<template>

<div class="container">

<el-row :gutter="0" class="box-card">

<el-col :span="12" class="logo">螺钉课堂学习系统</el-col>

<el-col :span="12">

<el-card class="login">

<div class="clearfix card-header">

<span>登录</span>

</div>

<div>

<!-- 用户名 -->

<el-form ref="form" label-width="80px" :model="formData" :rules="loginRules">

<el-form-item label="用户名" prop="username">

<el-input

v-model="formData.username"

autocomplete="off"

></el-input>

</el-form-item>

<el-form-item label='密码' prop='password'>

<el-input

type='password'

v-model='formData.password'

show-password

></el-input>

</el-form-item>

<el-form-item>

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

<el-button>重置</el-button>

</el-form-item>

</el-form>

</div>

</el-card>

</el-col>

</el-row>

<div class="footer">

<p>螺钉课堂@螺钉大叔 © nodeing.com</p>

</div>

</div>

</template>

<script setup>

import { ref } from 'vue'

import { validateUsername, validatePassword } from './validators'

const formData = ref({

username: 'admin212',

password: '123Abc',

})

const loginRules = ref({

username: [

{

validator: validateUsername,

trigger: 'blur'

}

],

password: [

{validator: validatePassword},

{ required: true, message: '密码不能为空', trigger: 'blur' },

{ min: 6, max: 16, message: '用户名长度6-16位字符', trigger: 'blur' },

],

})

</script>

 

<style lang="scss" scoped>

.container {

height: 100%;

.clearfix:before,

.clearfix:after {

display: table;

content: '';

clear: both;

}

.box-card {

width: 1000px;

position: absolute;

height: 500px;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

.logo {

background-color: #009688;

font-size: 28px;

line-height: 500px;

font-weight: bold;

color: white;

text-align: center;

border-radius: 4px 0 0 4px;

}

.card-header {

margin-top: 40px;

margin-bottom: 20px;

display: flex;

justify-content: space-between;

align-items: center;

}

.login {

height: 100%;

border-radius: 0 4px 4px 0;

box-sizing: border-box;

}

}

.footer {

position: absolute;

bottom: 0;

height: 40px;

width: 100%;

p {

text-align: center;

}

}

}

</style>

目录：pluginsplugins/elements.js

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {

app.use(ElementPlus, { locale })

}