Element Plus 与 Vue 3:构建现代化 Web 应用的完美搭档

引言

Element Plus是基于Vue 3的组件库,它继承了Element UI的优秀基因,为Vue 3应用提供了丰富的界面组件。Element Plus不仅拥有与Element UI相同的高质量组件,还针对Vue 3进行了优化和更新,确保了与Vue 3的无缝集成。

环境准备

在开始使用Vue 3和Element Plus构建Web应用之前,确保你的开发环境已经准备就绪。以下是环境准备的步骤:

确保Node.js和npm/yarn已安装

1.检查Node.js版本
打开终端或命令提示符,输入以下命令来检查Node.js是否已安装以及其版本:

node -v

如果没有安装Node.js,或者安装的版本低于推荐版本,你需要从Node.js官网下载并安装最新版本。

2.检查npm/yarn版本(也可以用更高性能的pnpm)
npm是Node.js的包管理器,而yarn是另一个流行的包管理工具。你可以使用以下命令来检查npm或yarn是否已安装以及其版本:

npm -v

或者

yarn -v

如果没有安装npm或yarn,或者需要更新到最新版本,你可以根据需要进行安装或更新。

创建Vue 3项目(使用Vue CLI或Vite)

1.使用Vue CLI创建Vue 3项目
Vue CLI是一个基于Vue.js进行快速开发的完整系统。首先,确保你已经全局安装了Vue CLI:

npm install -g @vue/cli

或者

yarn global add @vue/cli

然后,创建一个新的Vue 3项目:

vue create my-vue3-project

在创建过程中,选择Vue 3作为项目版本。

2.使用Vite创建Vue 3项目(更推荐这个,性能更好)
Vite是一个现代的前端构建工具,它提供了快速的冷启动和即时热更新。首先,确保你已经全局安装了Vite:

npm install -g create-vite

或者

yarn create vite

然后,创建一个新的Vue 3项目:

create-vite my-vue3-project --template vue

或者

yarn create vite my-vue3-project --template vue

这将创建一个使用Vue 3的新项目。

安装Element Plus

Element Plus 是一个基于 Vue 3 的组件库,它提供了丰富的 UI 组件,可以帮助开发者快速构建高质量的用户界面。以下是使用 npm 或 yarn 安装 Element Plus 的步骤:

使用 npm 安装 Element Plus

在项目根目录下打开终端,执行以下命令:

npm install element-plus --save
使用 yarn 安装 Element Plus

在项目根目录下打开终端,执行以下命令:

yarn add element-plus

或者也可以使用性能更加好的pnpm 

引入 Element Plus 的 CSS 样式

安装完成后,需要引入 Element Plus 的 CSS 样式。这可以通过在项目的入口文件(通常是 main.js 或 main.ts)中添加以下代码来实现:

import 'element-plus/dist/index.css'
在 Vue 项目中全局注册 Element Plus 组件

为了在 Vue 项目中全局使用 Element Plus 组件,需要在创建 Vue 应用实例时使用 app.use() 方法来注册 Element Plus:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

通过以上步骤,Element Plus 就已经成功安装并注册到你的 Vue 项目中了。现在,你可以在项目的任何组件中直接使用 Element Plus 提供的 UI 组件,无需在每个组件中单独导入。

注意事项

  • 确保你的项目是基于 Vue 3 创建的,因为 Element Plus 是专门为 Vue 3 设计的。
  • 如果你的项目使用了 TypeScript,Element Plus 也提供了类型定义,可以无缝集成。
  • Element Plus 提供了按需引入组件的功能,这可以帮助你进一步减小打包体积。你可以使用 babel-plugin-component 插件来实现按需引入。

基本使用

在 Vue 3 中,Element Plus 提供了一套丰富的组件库,用于构建现代化的用户界面。以下是如何在 Vue 3 项目中创建组件、局部注册 Element Plus 组件,并使用这些组件构建界面的步骤。

创建Vue组件

首先,你需要创建一个新的 Vue 组件。在 Vue 3 中,你可以使用单文件组件(SFC)的方式来创建组件。例如,创建一个名为 MyComponent.vue 的文件:

<template><div><el-button>默认按钮</el-button></div>
</template><script>
export default {name: 'MyComponent'
}
</script><style scoped>
/* 在这里添加组件的样式 */
</style>
在组件中局部注册Element Plus组件

在 Vue 3 中,你可以使用 <script setup> 语法来局部注册 Element Plus 组件。这允许你在单个组件中使用 Element Plus 的组件,而不需要在全局范围内注册它们。以下是如何在组件中局部注册 Element Plus 的按钮组件的示例:

<template><div><el-button>默认按钮</el-button></div>
</template><script setup>
import { ElButton } from 'element-plus'// 使用Element Plus的按钮组件
const Button = ElButton
</script><style scoped>
/* 在这里添加组件的样式 */
</style>

在上面的代码中,我们通过 import 语句从 element-plus 包中导入了 ElButton 组件,并在 <script setup> 块中将其注册为局部组件。然后在 <template> 中使用它。

使用Element Plus组件构建界面

现在,你已经了解了如何在 Vue 组件中局部注册 Element Plus 组件,接下来可以使用这些组件来构建你的界面。以下是一个使用 Element Plus 组件构建的简单界面示例:

<template><div><el-form :model="formModel" :rules="rules"><el-form-item label="用户名" prop="username"><el-input v-model="formModel.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="formModel.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">登录</el-button></el-form-item></el-form></div>
</template><script setup>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'const formModel = ref({username: '',password: ''
})const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
</script><style scoped>
/* 在这里添加组件的样式 */
</style>

在这个示例中,我们使用了 Element Plus 的表单组件(el-form)、表单项组件(el-form-item)、输入框组件(el-input)和按钮组件(el-button)来构建一个简单的登录表单界面。

有的小伙伴可能不明白这个表单数据是怎么传达的,以及规则如何配置,下面我们展开讲讲

使用 :model 绑定数据和 :rules 绑定规则

在 Element Plus 的表单组件中,el-form 组件的 :model 属性和 :rules 属性是用于实现表单数据绑定和表单验证的关键特性。下面将详细解释这两个属性的原理和使用思路。

:model 绑定数据

el-form 组件的 :model 属性用于绑定一个响应式对象,该对象包含了表单的所有数据字段。当表单中的输入字段发生变化时,model 对象中的相应属性也会自动更新,反之亦然。

原理:

  • :model 属性通过 Vue 的响应式系统与表单输入字段进行双向绑定。
  • 当用户在输入字段中输入数据时,输入字段的值会更新到 model 对象中对应的属性。
  • 同样,如果 model 对象中的属性值发生变化,输入字段的显示也会相应更新。

使用思路:

1.在 Vue 组件的 <script setup> 部分,使用 ref 或 reactive 创建一个响应式对象作为表单数据模型。

2.在 el-form 组件中使用 :model 属性将这个响应式对象绑定为表单的数据源。

3.在 el-form-item 组件中,使用 v-model 将输入字段与 model 对象中相应的属性进行双向绑定。

人话::model绑定对象数组,然后用v-model绑定具体对象的值

示例代码:

<template><el-form :model="formModel"><el-form-item label="用户名" prop="username"><el-input v-model="formModel.username"></el-input></el-form-item><!-- 其他表单项 --></el-form>
</template><script setup>
import { ref } from 'vue'const formModel = ref({username: '',// 其他字段
})
</script>

:rules 绑定规则(表单验证)

Element Plus 提供了一套完整的表单验证机制,使得开发者可以轻松地为表单添加验证规则,并处理验证错误。以下是如何在 Vue 3 项目中使用 Element Plus 的表单验证机制来创建带有验证规则的表单,并触发表单验证和错误处理的步骤。

Element Plus 的表单验证机制

Element Plus 的表单验证机制基于以下核心概念:

  • 验证规则(Rules):定义了表单字段需要满足的条件。这些规则可以是必填、格式匹配、自定义验证函数等。
  • 触发时机(Triggers):定义了何时触发表单验证。例如,可以设置在输入框失去焦点(blur)或用户提交表单时进行验证。
  • 错误信息(Messages):当验证失败时,显示给用户的提示信息。
创建带有验证规则的表单

在 Vue 3 组件中,你可以使用 el-form 和 el-form-item 组件来创建表单,并通过 :rules 属性为每个表单项添加验证规则。以下是一个带有验证规则的表单示例:

<template><el-form :model="formModel" :rules="rules" ref="formRef" @submit.prevent="handleSubmit"><el-form-item label="用户名" prop="username"><el-input v-model="formModel.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="formModel.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref, reactive } from 'vue'const formModel = reactive({username: '',password: ''
})const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }]
}const formRef = ref(null)const handleSubmit = () => {formRef.value.validate((valid) => {if (valid) {// 表单验证通过,执行提交逻辑console.log('表单提交成功', formModel)} else {// 表单验证失败,显示错误信息console.log('表单验证失败')}})
}
</script>

在这个示例中,我们定义了 formModel 作为表单的数据模型,并通过 :rules 属性为用户名和密码字段添加了验证规则。我们还使用了 el-form 的 ref 属性来获取表单的引用,并在提交时调用 validate 方法来触发表单验证。

触发表单验证和错误处理

在上面的示例中,我们通过点击提交按钮来触发表单验证。当用户点击提交按钮时,handleSubmit 方法会被调用,该方法使用 formRef.value.validate 方法来验证表单数据。如果验证通过,我们可以执行表单提交的逻辑;如果验证失败,我们可以显示错误信息或进行其他错误处理。

在 el-form-item 组件中,我们使用 prop 属性来指定要验证的字段。当表单验证失败时,Element Plus 会自动显示与该字段关联的错误信息。

el-form 组件的 :rules 属性用于绑定一个对象,该对象定义了表单验证的规则。这些规则会在表单提交时被触发,用于验证表单数据是否符合预期。

原理:

  • :rules 属性通过 Element Plus 的表单验证系统与表单输入字段进行关联。
  • 当表单提交时,Element Plus 会根据 rules 对象中定义的规则对表单数据进行验证。
  • 如果验证失败,Element Plus 会显示相应的错误信息,并阻止表单提交。

使用思路:

1.在 Vue 组件的 <script setup> 部分,定义一个对象作为表单验证规则。

2.在 el-form 组件中使用 :rules 属性将这个验证规则对象绑定到表单上。

3.在 el-form-item 组件中,使用 prop 属性指定要验证的字段。

人话:表单上用:rules绑定整个规则对象,prop接受对应的数组(数组里面包含了一条或多条规则对象)

高级特性

使用 Element Plus 的指令(如 v-loading、v-popover等)

Element Plus 提供了一些自定义指令,如 v-loading 和 v-popover,这些指令可以简化特定功能的实现。

1.v-loading
v-loading 指令用于在元素上显示加载状态。你可以将它绑定到一个布尔值,以控制加载状态的显示。

<el-button v-loading="isLoading">加载中</el-button>

2.v-popover
v-popover 指令用于创建一个弹出提示框。你可以通过绑定一个对象来配置弹出提示框的内容、触发方式等。

<el-button v-popover="popoverConfig">悬停显示</el-button><script>
export default {data() {return {popoverConfig: {title: '标题',content: '这里是内容',trigger: 'hover'}};}
}
</script>
Element Plus 的国际化(i18n)支持

Element Plus 支持国际化,允许你为应用提供多语言支持。

1.配置国际化
你需要安装 element-plus 的国际化插件,并在你的应用中配置它。

npm install element-plus --save
npm install @element-plus/icons-vue --save

2.使用国际化插件
在你的应用中,你可以使用 useElementPlusI18n 方法来配置国际化。

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import en from 'element-plus/lib/locale/lang/en';
import zh from 'element-plus/lib/locale/lang/zh-CN';const app = createApp(App);app.use(ElementPlus, {locale: zh // 或者 en
});app.mount('#app');

总结 

Element Plus 是一个专为 Vue 3 设计的组件库,它继承了 Element UI 的优秀基因,提供了丰富的 UI 组件,帮助开发者快速构建高质量的用户界面


资料推荐

一个 Vue 3 UI 框架 | Element Plus 官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3单文件jsx输出多组件示例遇到的坑

感谢博主减肥吧Evan提供的SFC实现多组件的思路和实现&#xff0c;小卷在大佬的基础上再完善下实现。 我们从tsx的API使用上得到启发&#xff0c;可以在vue的单文件组件&#xff08;sfc&#xff09;中使用defineComponent来定义和导出多个独立的小组件。此时sfc中的<templat…

SSM框架学习笔记(仅供参考)

&#xff08;当前笔记简陋&#xff0c;仅供参考&#xff09; 第一节课&#xff1a; &#xff08;1&#xff09;讲述了Spring框架&#xff0c;常用jar包&#xff0c;以及框架中各个文件的作用 &#xff08;2&#xff09;演示了一个入门程序 &#xff08;3&#xff09;解释了…

Redis 实现的延时队列组件

最近看开源看到一个好用的延时队列组件&#xff0c;已经上生产。代码量很少&#xff0c;主要就是利用Redis监听过期键实现的。然后搞点策略模式柔和柔和。利用Spring Start 封装了一下&#xff0c;全是俺掌握的知识&#xff0c;稍微研究了下就搞懂了。觉得挺有用的&#xff0c;…

006-三台交换机堆叠

三台交换机堆叠 链形连接和环形连接 链形配置IRF与环形配置IRF的区别 三个交换机链形配置IRF与三个交换机环形配置IRF的主要区别体现在以下几个方面&#xff1a; 物理位置要求&#xff1a; 链形连接&#xff1a;对成员设备的物理位置要求相对较低&#xff0c;主要适用于成员…

计算机课程名,汇总

MP-ZHI, CS-DOG, R, NBA ! 助记词&#xff1a;媒婆知道&#xff0c;CS-DOG&#xff0c;认识NBA明星&#xff01; M&#xff0c;密&#xff0c;《网络安全》P&#xff0c;Performance&#xff0c;性能卓越的&#xff0c;指的是超算Z&#xff0c;组&#xff0c;《计算机组成原理…

Linux下如何解压rar文件

在windows下我们压缩解压文件通常后缀为rar&#xff0c;在linux下我们压缩解压文件通常后缀为tar 默认在linux下我们不能解压压缩rar文件&#xff0c;那我们如何使用呢&#xff1f; 我们可以下载rarlinux安装包实现解压压缩后缀为rar的包 下载地址&#xff1a;https://www.r…

HybridCLR + Addressable 热更新篇(一)

目录 前言一、HybridCLR 和 Addressable 是什么&#xff1f;1. HybridCLR2. Addressable 二、使用步骤1.HybridCLR导入2.HybridCLR配置3.Addressable导入4.Addressable配置 前言 随着移动互联网和游戏行业的快速发展&#xff0c;热更新技术变得越来越重要。热更新能够在不重新…

图——定义和基本术语

图是数据结构中非常重要的一章&#xff0c;这篇文章就先介绍一下图的定义和基本术语。 一&#xff0c;图的构成 图&#xff1a;Graph(V,E) V&#xff1a;顶点(数据元素)的有穷非空集合&#xff1b; E&#xff1a;边的有穷集合。 如下面这个图&#xff0c;由点集和边集可以确定…

Python的分布式系统设计与开发

Python中的分布式系统设计与开发是一个复杂而广泛的主题&#xff0c;它涉及多个方面&#xff0c;包括系统架构、组件设计、通信机制、数据处理等。以下是对Python中分布式系统设计与开发的详细说明&#xff1a; 一、分布式系统基础 1. 定义与特点 分布式系统是指由多个独立的…

C++——类与对象(下)

在类与对象的上和中已经把类与对象的大部分内容讲了&#xff0c;这里对最后的一些内容进行补充说明。 目录 一、初始化列表 二、类型转换 三、static成员 四、友元 五、内部类 六、匿名对象 一、初始化列表 之前我们在实现构造函数的时候&#xff0c;初始化成员变量主要是使用…

mupdf 编译说明

进入官网下载源码&#xff1a;https://www.mupdf.com/releases 挑选需要的版本&#xff0c;下载解压&#xff0c;然后打开解决方案&#xff0c;进行编译

python 怎样生成窗体

通过import tkinter导入Tkinter模块&#xff0c;没有这句下面的都不成立了。 wintkinter.Tk()&#xff0c;这句是创建windows的窗口对象&#xff0c;注意后面的Tk&#xff0c;大小写。 win.title("窗口")&#xff0c;这段是设置窗口上的标题。 另外窗口的大小你可以通…

Linux操作系统特殊权限、文件系统管理命令、网络配置命令

Linux操作系统特殊权限 在Linux操作系统中&#xff0c;除了常规的读、写、执行权限外&#xff0c;还有一些特殊权限用于控制文件和目录的访问行为。这些特殊权限包括SUID&#xff08;Set User ID&#xff09;、SGID&#xff08;Set Group ID&#xff09;和Sticky Bit&#xff…

LlamaIndex 结构化输出

我们和大模型是通过 prompt 进行交互的&#xff0c;我们提示什么&#xff0c;大模型就输出什么。 假如我们要求大模型输出结构化的数据如 JSON&#xff0c;yaml 是不是也可以&#xff1f; 第一个例子 先建一个索引&#xff1a; from llama_index.core import VectorStoreIn…

java实战项目-学生管理系统(附带全套源代码)--《基础篇》

一、前言 第一个java小型学生管理系统&#xff0c;思路和其他语言都一样&#xff0c;因为有C语言的基础&#xff0c;写这个并不是太难&#xff0c;不过&#xff0c;进阶篇的就难太多了。明天晚上更新进阶篇&#xff0c;因为目前代码还没有完善&#xff0c;保守估计需要500行代…

网络请求优化:如何让你的API飞起来

网络请求优化&#xff1a;如何让你的API飞起来 亲爱的开发者朋友们&#xff0c;你是否曾经遇到过这样的场景:用户疯狂点击刷新按钮,你的服务器却像老年人散步一样慢吞吞地响应。或者,你的应用像个贪吃蛇,疯狂吞噬用户的流量包。如果你对这些情况再熟悉不过,那么恭喜你,你正需要…

Unity ColorSpace 之 【颜色空间】相关说明,以及【Linear】颜色校正 【Gamma】的简单整理

Unity ColorSpace 之 【颜色空间】相关说明&#xff0c;以及【Linear】颜色校正 【Gamma】的简单整理 目录 Unity ColorSpace 之 【颜色空间】相关说明&#xff0c;以及【Linear】颜色校正 【Gamma】的简单整理 一、简单介绍 二、在Unity中设置颜色空间 三、Unity中的Gamma…

部队物资仓库出入库管理系统|实现物资有效的战备保障

随着科技的不断发展&#xff0c;智慧营区已成为现代军事管理的重要方向。后勤物资管控作为营区管理的重要组成部分&#xff0c;对于保障营区正常运转和提高部队战斗力具有重要意义。智慧营区后勤物资管控平台作为数字化后勤建设的重要组成部分&#xff0c;能够实现营区物资的智…

Ubuntu下载安装chrome浏览器

方法一&#xff1a;wget下载并安装 1、创建文件夹存安装包 cd /root/Downloads mkdir chrome 2、下载安装包到文件夹内 wget -c https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P /root/Downloads/chrome 3、安装 cd chrome sudo dpkg -i go…

药品类别功能助力智慧校园医务管理向前迈进

在智慧校园的医务管理框架下&#xff0c;药品类别管理模块发挥着举足轻重的作用&#xff0c;它以智能化的方式优化药品的存储、分配流程&#xff0c;确保每一步都符合安全与效率的标准。这一功能围绕着科学分类的核心理念&#xff0c;细致入微地组织药品信息&#xff0c;为校园…