【Element UI详细介绍】

Element UI详细介绍

  • 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("此处需要加入弹出框");}}
});

3)在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 因其简单易用和功能丰富而受到许多开发者的欢迎,尤其适合快速构建中大型项目的后台管理界面。

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

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

相关文章

Java进阶之旅第五天

Java进阶之旅第五天 不可变集合 应用场景 1.如果某个数据不能被修改,把它拷贝到不可变集合中是个很好的实践2.当集合对象被不可信的库调用时,不可变形式是安全的3.不可变集合不能修改,只能进行查询 获取方式 在List,Set,Map接口中,都存在静态的of方法,可以获取一个不可变的…

蓝桥杯、编程考级、NOC、全国青少年信息素养大赛—scratch列表考点

1、小小情报员&#xff08;202309scratch四级24题&#xff09; 1.准备工作 &#xff08;1&#xff09;选择背景 Colorful City&#xff1b; &#xff08;2&#xff09;保留角色小猫&#xff0c;选择角色Ballerina。 2.功能实现 &#xff08;1&#xff09;角色小猫初始位置…

leetcode-2788按分隔符拆分字符串

题目链接 2788. 按分隔符拆分字符串 - 力扣&#xff08;LeetCode&#xff09; 解题思路 class Solution:def splitWordsBySeparator(self, words: List[str], separator: str) -> List[str]:result []for i in words:for j in i.split(separator):if j:result.append(j)…

C语言中的变量与scanf介绍(干货)

目录 前言 一、变量 1. 变量的创建 2. 变量的分类 3. 强制类型转换 二、scanf介绍 1. scanf的基本用法 2. scanf的返回值 3. scanf的占位符 4. 赋值忽略符 结语&#xff1a; 前言 我们在前面的文章中介绍了数据类型&#xff0c;以及printf函数的使用。 C语言中的数…

postgresql(Windows)初始化数据库教程

省流&#xff1a;本文章内容讲的是如何初始化postgresql数据库环境&#xff0c;前提是已经安装好postgresql数据库&#xff0c;安装步骤参考postgresql&#xff08;Windows&#xff09;安装教程 # 开始&#xff1a;安装postgresql-12.14-2-windows-x64.exe完成后进行初始化数据…

Vue待办事项(组件,模块化)

//html页面代码 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <style> * { padding: 0; margin: 0; }…

洋州影院购票系统:如何用Java、Spring Boot、Vue和MySQL实现现代化管理

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

用户ssh正确密码登陆均报错Permission denied, please try again.处理方法

一个树莓派镜像&#xff0c;启动后发现没有 sshd 功能&#xff0c;于是 启用 openssh&#xff0c;重新启动&#xff0c;又发现树莓派拒绝 ssh 连接请求。 我的一台树莓派IP是&#xff1a;192.168.59.133任何服务器使用任何用户ssh均报错&#xff0c;甚至连自己都不能ssh自己。 …

Day 25 | 回溯 216.组合总和III 、17.电话号码的字母组合

216.组合总和III 题目 文章讲解 视频讲解 思路&#xff1a; 以回溯函数做对称&#xff0c;上面做了什么操作&#xff0c;下面也是 class Solution {List<List<Integer>> result new ArrayList<>();LinkedList<Integer> path new LinkedList<&g…

在Java中调企微机器人发送消息到群里

目录 如何使用群机器人 消息类型及数据格式 文本类型 markdown类型 图片类型 图文类型 文件类型 模版卡片类型 文本通知模版卡片 图文展示模版卡片 消息发送频率限制 文件上传接口 Java 执行语句 String url "webhook的Url"; String result HttpReque…

pytest - Getting Start

前言 项目开发中有很多的功能&#xff0c;通常开发人员需要对自己编写的代码进行自测&#xff0c;除了借助postman等工具进行测试外&#xff0c;还需要编写单元测试对开发的代码进行测试&#xff0c;通过单元测试来判断代码是否能够实现需求&#xff0c;本文介绍的pytest模块是…

【超详细!各版本通用Matlab入门教程】0基础学会可用于毕业论文制图、数学,线代概率论运算等

MATLAB 下载、安装方法&#xff1a; 【若未安装环境&#xff0c;可以点击下方链接教程先学习安装&#xff0c;再进行MATLAB入门学习】 点击下方文字&#xff1a;即可跳转MATLAB下载&安装教程 下载&安装MATLAB 1.常识 1.1注释方法 % 中文内容【注释内容】 %% 段落注…

计算机导论10-软件与软件工程

文章目录 软件软件的概念软件的定义软件的特征 软件的保护与授权软件的法律保护软件许可 软件工程软件危机软件危机的概念产生软件危机的原因 软件工程的概念软件工程的定义软件工程基本原理软件工程框架软件工程三要素 软件工程方法学软件工程方法软件工程工具软件工程过程 软…

Mysql 编译安装部署

Mysql 编译安装部署 环境&#xff1a; 172.20.26.198&#xff08;Centos7.6&#xff09; 源码安装Mysql-5.7 大概步骤如下&#xff1a; 1、上传mysql-5.7.28.tar.gz 、boost_1_59_0.tar 到/usr/src 目录下 2、安装依赖 3、cmake 4、make && make install 5、…

go语言(十二)----多态

一. 多态的基本要素 有一个父类(有接口)有子类(实现了父类的全部方法)父类类型的变量(指针)指向(引用)子类的具体数据变量首先,定义一个父类 //本质是一个指针 type AnimalIF interface {Sleep()GetColor() stringGetType() string }其次,有一个子类 //具体的类 typ…

(上) C语言中的语句分类及分支语句:if语句、switch语句介绍

目录 前言 一、语句的分类 1. 空语句 2. 表达式语句 3. 函数调用语句 4. 复合语句 5. 控制语句 二、分支语句 1. if语句 (1) if的使用 (2) else的使用 (3) 分支中包含多条语句 (4) 嵌套if (5) 悬空else问题 2. switch语句 (1) if语句和switch语句的对比 (2) s…

触摸屏监控双速电动机-确定地址分配

I/O地址分配 当选择了PLC之后&#xff0c;首先需要确定的是系统中各I/O点的绝对地址。在某些PLC 中1/O绝对地址的分配方式共有固定地址型、自动分配型、用户定义型3种。实际所使用的方式取决于所采用的PLC的CPU型号、编程软件、软件版本、编程人员的选择等因素。 本任务输入信…

鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心缩放、顶部缩放、纵向缩放

EntryComponentstruct Index {State widthA: number 200State heightA: number 200onPageShow():void{animateTo ( {duration: 2000,iterations: -1,curve:Curve.Linear}, () > {this.widthA 0this.heightA 0} )}build() {Column() {// 中心缩放Column(){}.width(this.wi…

QT+opencv源码编译

时间记录&#xff1a;2024/1/20 一、版本介绍 QT5.12.7cmake3.22.0opencv4.5.4 二、编译步骤 &#xff08;1&#xff09;下载opencv源码&#xff0c;然后安装&#xff0c;opencv的安装即对源码的解压过程&#xff0c;解压后的文件目录如下 &#xff08;2&#xff09;openc…

全开源多城市同城信息小程序源码(Laravel 框架),同城分类信息发布便民小程序系统【非DZ】

同城生活分类信息小程序&#xff0c;人才招聘、房产二手 多城市地区同城分类信息发布&#xff0c;商家入驻等功能 小程序前后端代码开源无加密&#xff0c;可进行二次开发 【源码运行要求】 1、需要已认证的微信小程序 2、已备案的域名及服务器空间 推荐使用宝塔面板LinuxPHP…