vue3 简单引入 element-ui

🕗 发布于 2024-12-08 09:23 ui vue.js 前端

以下是在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 元素上。

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

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

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

配置插件（在 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 属性，从 `

原文地址：https://blog.csdn.net/m0_75138009/article/details/144316682

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：重生之我在异世界学编程之C语言：深入结构体篇（下）
下一篇：云服务器部署upload-labs-docker（文件上传靶场）环境 &&以及相关报错问题

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14