elementplus登录界面

Element Plus 是一个基于 Vue.js 2.0 的组件库，它提供了许多常用的 UI 组件。如果你想使用 Element Plus 创建一个登录界面，可以按照以下步骤进行：

1. 安装 Element Plus

可以通过 npm 或 yarn 安装 Element Plus。在终端中输入以下命令：

npm install element-plus --save

或者

yarn add element-plus

2. 引入 Element Plus

在你的项目中引入 Element Plus，可以在 main.js 中添加以下代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

3. 创建登录界面

在你的组件中创建一个登录表单，可以使用 Element Plus 提供的表单组件、按钮组件、输入框组件等等。以下是一个简单的示例：

<template>
  <div class="login-form">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 处理登录逻辑
        } else {
          return false
        }
      })
    }
  }
}
</script>

这是一个简单的登录表单，包括用户名输入框、密码输入框和登录按钮。你可以根据自己的需求修改样式和逻辑。