vue3 简单引入 element-ui

以下是在Vue项目中引入Element-UI并设计登录和注册界面的详细步骤以及示例代码：

一、引入Element-UI

步骤一：安装Element-UI

在你的Vue项目根目录下，打开终端，运行以下命令来安装Element-UI（假设你使用的是Vue 3，如果是Vue 2，安装的版本会稍有不同）：

npm install element-plus --save

步骤二：完整引入（简单但会引入所有组件，适合小型项目）

在项目的 main.js 文件（这是Vue项目的入口文件）中，添加以下代码来完整引入Element-UI：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

这里：

• 首先导入 createApp 函数用于创建Vue应用实例，以及项目的根组件 App.vue。
• 接着导入 ElementPlus 模块本身以及它的样式文件（element-plus/dist/index.css），确保样式能正确应用。
• 然后通过 app.use(ElementPlus) 将Element-UI注册到Vue应用实例中，最后使用 app.mount('#app') 挂载应用到页面的 #app 元素上。

步骤三：按需引入（推荐，能减小项目打包体积，适合中大型项目）

1. 安装相关插件
   先安装 unplugin-vue-components 和 unplugin-auto-import 这两个插件，在项目根目录下的终端运行命令：

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

2. 配置插件（在 vue.config.js 文件中，如果没有则创建一个）
   添加以下配置内容：

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/vue');
const Components = require('unplugin-vue-components/vue');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
});

这样就可以实现按需引入Element-UI的组件和相关API了，项目打包时只会包含实际使用到的部分，减小体积。

二、设计登录界面示例

以下是一个使用Element-UI组件设计的简单登录界面的代码示例，假设放在 Login.vue 文件中（单文件组件形式）：

<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">用户登录</h2>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const loginForm = reactive({
  username: '',
  password: '',
});

const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度至少为3位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
  ],
});

const loginFormRef = ref(null);

const handleLogin = async () => {
  if (!loginFormRef.value.validate()) {
    return;
  }
  // 这里可以添加实际的登录逻辑，比如发送axios请求到后端验证用户名和密码
  // 暂时模拟登录成功提示
  ElMessage.success('登录成功');
};

const resetForm = () => {
  loginFormRef.value.resetFields();
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}

.login-card {
  width: 360px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>

在这个登录界面示例中：

• 模板部分（<template>） ：
  • 使用 el-card 组件创建了一个卡片式的容器，让界面看起来更美观、整洁。
  • 在卡片内，通过 el-form 组件构建了一个表单，里面包含了两个 el-form-item 分别用于输入用户名和密码，它们都绑定了相应的 v-model 来实现双向数据绑定，方便获取用户输入的值。
  • 表单下方放置了两个 el-button，一个用于触发登录操作（绑定了 handleLogin 函数），另一个用于重置表单（绑定了 resetForm 函数）。
• 脚本部分（<script setup>） ：
  • 通过 reactive 函数创建了 loginForm 这个响应式对象，用于存储用户名和密码的输入值。
  • 同时定义了 loginRules 这个响应式对象，用于设置表单的验证规则，比如用户名和密码不能为空，且用户名长度至少3位、密码长度至少6位等，这些规则会在用户输入时触发相应的提示信息（通过 ElMessage 组件来显示提示内容）。
  • loginFormRef 是一个 ref 类型的变量，用于获取表单实例，方便后续调用表单的验证方法（validate ）和重置方法（resetFields ）。
  • handleLogin 函数用于处理登录操作，首先会进行表单验证，如果验证通过，可以在这里添加实际的登录逻辑，比如发送网络请求到后端验证用户名和密码是否匹配等，这里暂时只是模拟登录成功弹出提示信息。
  • resetForm 函数则用于重置表单，将用户输入的内容清空并恢复到初始状态。
• 样式部分（<style scoped>） ：
  • 对整个登录容器（.login-container ）设置了布局相关的样式，使其在页面中居中显示，并且设置了背景颜色。
  • 对登录卡片（.login-card ）设置了宽度，对登录标题（.login-title ）设置了居中显示以及底部的外边距等样式，让界面整体更加美观、协调。

三、设计注册界面示例

以下是一个使用Element-UI组件设计的简单注册界面的代码示例，假设放在 Register.vue 文件中（单文件组件形式）：

<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 class="register-title">用户注册</h2>
      <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请再次输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
          <el-button @click="resetRegisterForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
});

const registerRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度至少为3位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, message: '两次输入密码不一致', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
});

const registerFormRef = ref(null);

const validateConfirmPassword = (rule, value, callback) => {
  if (value === registerForm.password) {
    callback();
  } else {
    callback(new Error('两次输入密码不一致'));
  }
};

const handleRegister = async () => {
  if (!registerFormRef.value.validate()) {
    return;
  }
  // 这里可以添加实际的注册逻辑，比如发送axios请求到后端保存用户注册信息
  // 暂时模拟注册成功提示
  ElMessage.success('注册成功');
};

const resetRegisterForm = () => {
  registerFormRef.value.resetFields();
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}

.register-card {
  width: 420px;
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
}
</style>

在这个注册界面示例中：

• 模板部分（<template>） ：
  • 整体结构和登录界面类似，也是使用 el-card 组件作为容器，里面通过 el-form 组件构建表单。
  • 表单中除了用户名和密码输入项外，还增加了"确认密码"和"邮箱"输入项，用于更全面地收集用户注册信息，每个输入项同样通过 v-model 进行双向数据绑定。
  • 表单下方放置了用于触发注册操作（绑定 handleRegister 函数）和重置表单（绑定 resetRegisterForm 函数）的 el-button 组件。
• 脚本部分（<script setup>） ：
  • 通过 reactive 函数创建了 registerForm 响应式对象，用于存储用户输入的用户名、密码、确认密码和邮箱等注册信息。
  • 定义了 registerRules 响应式对象来设置更详细的表单验证规则，比如用户名、密码的基本长度要求，邮箱的格式要求等，对于"确认密码"项，还自定义了一个验证函数 validateConfirmPassword 来确保两次输入的密码一致。
  • registerFormRef 是 ref 类型变量，用于获取表单实例以便调用验证和重置方法。
  • handleRegister 函数用于处理注册操作，先进行表单验证，验证通过后可以添加实际的注册逻辑（如发送请求到后端保存用户信息等），这里同样暂时模拟注册成功弹出提示信息。
  • resetRegisterForm 函数用于重置整个注册表单的内容。
• 样式部分（<style scoped>） ：
  • 样式设置和登录界面类似，对注册容器（.register-container ）设置布局相关样式使其在页面居中，设置背景颜色；对注册卡片（.register-card ）设置宽度，对注册标题（.register-title ）设置居中显示和底部外边距等，让界面整体协调美观。

以上就是在Vue项目中引入Element-UI并设计登录、注册界面的示例代码，你可以根据实际项目需求对界面样式、验证规则以及具体的业务逻辑（如与后端的交互等）进行进一步的调整和完善。

四、路由配置（用于在项目中访问登录和注册界面）

在引入了登录和注册界面组件后，通常需要在Vue Router的路由配置中设置对应的路由路径，以便能在浏览器中访问到这两个界面。以下是一个简单的路由配置示例（假设路由配置文件是 router.js ）：

import { createRouter, createWebHistory } from 'vue-router';
import Login from './views/Login.vue';
import Register from './views/Register.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  // 可以添加更多其他路由配置，比如首页、详情页等路由
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在上述路由配置中：

• 首先导入 createRouter 和 createWebHistory 函数用于创建路由实例和设置路由历史模式。
• 接着导入之前创建的登录界面组件（Login.vue ）和注册界面组件（Register.vue ）。
• 然后定义了两条路由，一条路径为 /login 对应登录界面组件，另一条路径为 /register 对应注册界面组件，并且分别给它们设置了路由名称（方便后续进行路由跳转等操作时使用）。
• 最后创建并导出路由实例，这样在Vue项目中就可以通过访问相应的路径（如 http://localhost:8080/login 访问登录界面，http://localhost:8080/register 访问注册界面，前提是项目运行在本地的8080端口，具体端口根据实际项目启动情况而定）来展示对应的界面了。

你可以根据项目整体的架构和功能需求，进一步扩展和完善路由配置，比如添加路由导航守卫、设置路由嵌套等功能。

五、关于样式和交互的进一步优化

1. 样式定制

虽然Element-UI有默认的样式风格，但你可以根据项目需求对登录和注册界面的样式进行进一步定制。例如，可以通过修改Element-UI的主题变量来改变组件的颜色、字体等外观属性，使其更贴合项目的整体视觉设计。以下是一种简单的通过CSS变量修改主题颜色的示例（在项目的全局CSS文件或者单独的主题定制CSS文件中）：

:root {
  --el - color - primary: #1989fa; /* 修改主题色为蓝色 */
  --el - color - success: #67c23a;
  --el - color - warning: #e6a23c;
  --el - color - danger: #f56c6c;
  --el - border - radius - base: 4px; /* 修改组件的基础圆角半径 */
}

通过这种方式可以改变Element-UI组件的默认颜色和部分样式属性，不过要注意不同版本的Element-UI对主题变量的支持情况和命名可能略有不同，需要根据实际使用的版本进行调整。

2. 交互优化

对于登录和注册界面的交互，除了基本的表单验证和按钮点击操作外，还可以考虑添加一些其他的交互增强功能。例如：

• 输入框提示信息优化 ：可以利用Element-UI输入框组件的 placeholder 属性以及 prefix-icon 和 suffix-icon 等功能，为用户提供更直观的输入提示。比如在密码输入框添加一个眼睛图标，点击可以切换密码的显示和隐藏状态，提升用户体验。示例代码如下（在登录或注册界面的密码输入框部分添加）：

<el-input
  v-model="loginForm.password"
  placeholder="请输入密码"
  type="password"
  suffix-icon="el-icon-view"
  @click="togglePasswordVisible"
></el-input>

然后在对应的 <script setup> 脚本中添加 togglePasswordVisible 函数来实现密码显示隐藏的切换逻辑（这里需要操作输入框的 type 属性，从 `