前端技术-element-ui 介绍 | 学习笔记

简介: 简介:快速学习前端技术-element-ui 介绍

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-element-ui 介绍】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/667/detail/11316


前端技术-element-ui 介绍

 

内容介绍

一、element-ui 简介

二、element-ui 的效果展示


一、element-ui 简介

1.定义

element-ui 是饿了么前端出品的基于 Vue.js 的后台组件库,方便程序员进行页面快速布局和构建 (通俗讲 element-ui 可以用在 vue 中,快速写页面的各种效果,不需要写 ccs 的样式,因为 element-ui 将样式都做了封装)

2.官网:

http:/lelement-cn.eleme.io/#/zh-CN

创建 06-element-ui.html

代码不用写,通过官方文档都可以找到

打开官网,滑动到组件的位置,点击查看详情,进入到组件位置,目录中有很多基本组件,后面写页面从里面找复制代码就可以,已经封装好了


二、element-ui 的效果展示

1.Button 按钮

image.png

在 element-ui 中提供了不同效果的按钮,根据这些按钮,

整合到页面中做不同效果,如何整合?点击显示代码,里面源码全部包括,直接将代码复制,改成需要的项目就可以

2.Upload 上传

里面包括各种上传的组件,实现上传文件,这个组件同样将代码提供出来了,另外提供过程中也包含 java 使用代码

3.Table 表格

提供了各种样式的表格

4.Message 消息提示

做很多功能时,成功或是失败会有提示,有不同状态的提示,每个状态都有不同的样式

在实际的工作开发中,美工就是负责页面样式模块的,用了element-ui 就不需要美工了

相关文章
|
9天前
|
前端开发 JavaScript API
前端技术探索:从基础到未来趋势的深度剖析
前端技术探索:从基础到未来趋势的深度剖析
32 1
|
1天前
|
存储 缓存 监控
|
4天前
|
前端开发 JavaScript API
前端技术新趋势:PWA与Jamstack的融合探索
【10月更文挑战第4天】前端技术新趋势:PWA与Jamstack的融合探索
17 4
|
6天前
|
缓存 前端开发 JavaScript
前端技术趋势:探索现代Web开发的新领域
【10月更文挑战第1天】前端技术趋势:探索现代Web开发的新领域
29 4
|
6天前
|
缓存 前端开发 Serverless
前端技术新趋势:从PWA到Serverless架构
【10月更文挑战第1天】前端技术新趋势:从PWA到Serverless架构
18 3
|
6天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
8天前
|
缓存 前端开发 JavaScript
探索JavaScript的现代前端技术:从基础到进阶
探索JavaScript的现代前端技术:从基础到进阶
18 1
|
4天前
|
前端开发 搜索推荐 JavaScript
前沿技术:前端开发者的利器
【10月更文挑战第3天】前沿技术:前端开发者的利器
14 0
|
4天前
|
前端开发 JavaScript 编译器
前端开发新视界:2024年的五大技术趋势
【10月更文挑战第3天】前端开发新视界:2024年的五大技术趋势
17 0
|
4天前
|
运维 前端开发 JavaScript
前端开发新纪元:2024年必知的五大技术趋势
【10月更文挑战第3天】前端开发新纪元:2024年必知的五大技术趋势
14 0