【保姆级讲解Element UI】

在这里插入图片描述

🌈个人主页: 程序员不想敲代码啊
🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家
👍点赞⭐评论⭐收藏
🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步!

在这里插入图片描述

目录

  • 🏆1. Element UI
    • 🏆1.1 Vue+ElementUI安装
    • 🏆1.2 开发示例
  • 🏆2. 特点
  • 🏆3. 组件分类
  • 🏆4. 开始使用
  • 🏆5. 注意事项

🏆1. Element UI

💥Element UI 是一个基于 Vue 2.0 的桌面端组件库,主要用于构建快速、简洁的用户界面,Element UI 提供一套丰富的组件和工具,能够帮助开发者快速构建高质量的 Vue 应用,它由饿了么前端团队开发,并且开放源代码。

💥官网链接: 官网
💥另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview

🏆1.1 Vue+ElementUI安装

<!-- 1. 导入css -->
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<!-- 2. 引入vue和vue-router-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 未使用vue路由功能可不导入 -->
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
<!-- 3. 引入ElementUI组件 -->
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

🏆1.2 开发示例

💥开发一个基于vue+elementui的弹出框。
💥1)在HBuilder中建立一个基本html项目,在项目中创建一个html页面文件,导入必要的cssjs文件(即安装)

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 1. 导入css -->
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    <!-- 2. 引入vue和vue-router-->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- 未使用vue路由功能可不导入 -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <!-- 3. 引入ElementUI组件 -->
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
</head>

💥2)在页面中加入一个按钮,点击按钮以便于打开弹出框

<div id="app">
    <button v-on:click="clickme">点我试试</button>
</div>

💥3)创建vue实例

var vm = new Vue({
    el: '#app',
    methods: {
        clickme: function() {
            console.log("此处需要加入弹出框");
        }
    }
});

💥4)在elementui官方网站上的组件中找到MessageBox组件,可以将弹出框的示例代码拷入clickme函数中观察运行情况。

var vm = new Vue({
    el: '#app',
    methods: {
        clickme: function() {
            console.log("此处需要加入弹出框");
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
});

💥注:在示例中使用了箭头函数,及this关键字,需要同学们在课后重点了解。

💥以下是 Element UI 提供的一些主要特点以及组件分类:

🏆2. 特点

  1. 🏆用法简单Element UI 提供的组件具有统一的风格和用法,使得开发者能够快速上手并构建页面。

  2. 🏆配置灵活:多数组件都有多重配置选项,允许定制化以满足不同场景的需求。

  3. 🏆国际化支持:支持多语言,方便构建国际化应用。

  4. 🏆响应式:虽然是为桌面端优化的,但是许多组件在响应式布局上表现良好。

  5. 🏆良好的文档和社区支持Element UI 有着详尽的文档和活跃的社区,可以方便地解答开发中的问题。

🏆3. 组件分类

Element UI 的组件可以分为几个主要类别:

  1. 🏆基础组件:比如布局(Layout)、容器(Container)、颜色(Color)、字体(Typography)、图标(Icon)等。

  2. 🏆表单组件:输入框(Input)、选择器(Select)、开关(Switch)、滑块(Slider)、时间选择器(Time Picker)、日期选择器(Date Picker)、上传(Upload)等。

  3. 🏆数据展示组件:表格(Table)、标签(Tag)、进度条(Progress)、树形控件(Tree)、分页(Pagination)等。

  4. 🏆导航组件:菜单(NavMenu)、面包屑(Breadcrumb)、页签(Tabs)、下拉菜单(Dropdown)等。

  5. 🏆反馈组件:对话框(Dialog)、消息提示(Message)、消息弹窗(MessageBox)、通知(Notification)等。

  6. 🏆其他组件:如工具提示(Tooltip)、Popover、弹出框(Popover)、轮播(Carousel)、Collapse 折叠面板等。

🏆4. 开始使用

💥为了在 Vue 项目中使用 Element UI,需要安装它并在项目中引入。以下是一个快速开始的例子:

💥1. 使用 npmyarn进行安装:

npm install element-ui --save

yarn add element-ui

💥2. 在 main.js 中全局引入 Element UI

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

💥3. 在组件中使用 Element UI 提供的组件:

<template>
  <el-button>点击我</el-button>
</template>

🏆5. 注意事项

  • 🏆Vue 版本兼容性Element UI 主要与 Vue 2.x 版本兼容,如果你在使用 Vue 3.x,可能需要考虑其他UI框架,或者使用 Element Plus,它是Element UI的官方 Vue 3 兼容版本。

  • 🏆主题定制Element UI 支持 SCSS 变量覆盖和在线主题生成器,可以方便地进行主题定制。

  • 🏆维护性:由于 Element UI 是一个由社区维护的开源项目,在使用中可能会出现一些问题或bug,在生产环境中使用时,务必要测试所有的用例,并关注官方的更新和通知。

💥Element UI 因其简单易用和功能丰富而受到许多开发者的欢迎,尤其适合快速构建中大型项目的后台管理界面。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

负载均衡器如何工作,为什么如此重要?

现代应用程序和网站处理大量流量。负载均衡器是保证大型系统平稳运行的主要工具之一。 负载平衡器负责跨多个服务器路由客户端请求以分配负载并防止出现瓶颈。 这有助于最大限度地提高吞吐量、减少响应时间并优化资源使用。 负载均衡器的运行情况&#xff1a; (1).客户端请…

面试算法-176-验证二叉搜索树

题目 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 示例 1&#x…

C++内存管理与模版(用法详解)

C/C中程序内存区域划分 内核空间&#xff08;用户代码不能读写&#xff09;栈&#xff08;函数中存放的变量&#xff09;内存映射段堆&#xff08;重点&#xff09;数据段&#xff08;静态区&#xff09;全局变量 / 静态变量代码段&#xff08;常量区&#xff09; 试分析下列…

大模型用到的位置编码汇总(面试)

不同于RNN、CNN等模型&#xff0c;对于Transformer模型来说&#xff0c;位置编码的加入是必不可少的&#xff0c;因为纯粹的Attention模块是无法捕捉输入顺序的&#xff0c;即无法区分不同位置的Token。为此我们大体有两个选择&#xff1a;想办法将位置信息融入到输入中&#x…

OpenHarmony轻量系统开发【12】OneNET云接入

12.1 OneNET云介绍 通常来说&#xff0c;一个物联网产品应当包括设备、云平台、手机APP。我将在鸿蒙系统上移植MQTT协议、OneNET接入协议&#xff0c;实现手机APP、网页两者都可以远程&#xff08;跨网络&#xff0c;不是局域网的&#xff09;访问开发板数据&#xff0c;并控制…

ActiveMQ 05 高级使用

Active MQ 05 高级使用 queue browser 可以查看队列中的消息而不消费&#xff0c;没有订阅的功能 JMSCorrelationID 用于消息之间的关联&#xff0c;给人一种会话的感觉 http://activemq.apache.org/how-should-i-implement-request-response-with-jms.html JMSReplyTo …

codeforce #925 (div3) 题解

D. Divisible Pairs 给出数组 a a a&#xff0c;如果二元组 ( i , j ) (i,j) (i,j)满足 a i a j m o d x 0 & & a i − a j m o d y 0 a_i a_j mod x 0 \&\& a_i - a_j mod y 0 ai​aj​modx0&&ai​−aj​mody0&#xff0c;则beauty。其中 i &…

SpringBoot整合消息中间件(ActiveMQ,RabbitMQ,RocketMQ,Kafka)

消息中间件 消息消息队列JMS AMQPMQTTKafka Spring整合消息队列模拟消息队列的工作流程Spring整合ActiveMQSpring整合RabbitMQ直连交换机模式主题交换机模式 Spring整合RocketMQSpring整合kafka 消息 消息的发送方&#xff1a;生产者 消息的接收方&#xff1a;消费者 同步消息…

vite - WebAssembly入门

1. 初始化 vite 项目 1.1 安装 nvm&#xff08;可选&#xff09; brew update brew install nvm在 ~/.zshrc 添加 export NVM_DIR~/.nvm source $(brew --prefix nvm)/nvm.sh执行如下命令 source ~/.zshrc1.2 安装 node nvm install nodenvm ls -> …

1260. 二维网格迁移

1260. 二维网格迁移 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; 1260. 二维网格迁移 https://leetcode.cn/problems/shift-2d-grid/description/ 完成情况&#xff1a; 解题思路&#xff1a; 这…

android不同版本(支持>10)获取当前连接的wifi名称

1、AndroidManifest.xml 配置权限 <uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name"android.permission.CHANGE_NETWORK_STATE" /> <uses-permission android:name&q…

磁盘管理和文件系统

一.磁盘基础 1.磁盘结构 &#xff08;1&#xff09;物理结构&#xff1a; 盘片&#xff1a;硬盘有多个盘片&#xff0c;每盘片2面 磁头&#xff1a;每面一个磁头 &#xff08;2&#xff09;硬盘的数据结构 扇区&#xff1a;盘片被分为多个扇形区域&#xff0c;每个扇区存…

山姆·奥特曼是如何成为亿万富豪的?

2017年夏天&#xff0c;Superhuman公司首席执行官拉胡尔沃拉&#xff08;Rahul Vohra&#xff09;开始疯狂向投资者一一发消息&#xff0c;缘由是他的初创公司尝试了谷歌浏览器Chrome的一项即将推出的更新。由于一个看似无害的代码更改&#xff0c;Superhuman的智能电子邮件服务…

Jackson 2.x 系列【23】注解内省 AnnotationIntrospector

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 前言2. AnnotationIntrospector3. JacksonAnnotationIntrospector4. Annotati…

SQL12 获取每个部门中当前员工薪水最高的相关信息

题目&#xff1a;获取每个部门中当前员工薪水最高的相关信息 注意了&#xff0c;这道题目&#xff0c;分组函数只能查出来&#xff1a;每个部门的最高薪水&#xff0c;group by dept_no &#xff0c;根据部门分组&#xff0c;绝对不能group by dept_no,emp_no&#xff0c;不能…

【刷题笔记】第二天

一道图论相关的题目 3108. 带权图里旅途的最小代价 结论&#xff1a; 做与运算&#xff0c;结果不会大于当前值&#xff0c;也就是说与运算只能导致结果不变或越来越小&#xff0c;所以要使得边的and值最小&#xff0c;就是把每一个联通块的所有边都and一遍。 方法1&#xf…

Vue项目实战:基于用户身份的动态路由管理

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

201403-3 命令行选项

100分 #include <bits/stdc.h> using namespace std;int main() {string line;cin >> line;map<char, bool> dct; // true:带参数 false:不带参数for (int i 0; i < line.size(); i){if (line[i] ! :){dct.insert(pair<char, bool>(line[i], fals…

ubuntu 23.10.1 mysql 安装

注&#xff1a;请进入root用户模式下操作&#xff0c;若没有&#xff0c;输入命令前加上sudo 1、更新软件包列表 apt update2、安装最新版的Mysql服务器 apt install mysql-server -y如果不加-y 会在安装过程中&#xff0c;系统将提示你设置MySQL的root密码。确保密码足够强…

职场成长之路:如何规划与实现

在职场中&#xff0c;每个人都希望实现自己的职业目标和成长。然而&#xff0c;职场成长并非一蹴而就&#xff0c;需要有明确的规划和方法。本文将探讨如何在职场中规划与实现成长&#xff0c;帮助您迈向成功之路。 一、明确职业目标 1. 自我认知&#xff1a;了解自己的兴趣、…