开发者学堂课程【微服务+全栈在线教育实战项目演练(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 按钮
在 element-ui 中提供了不同效果的按钮,根据这些按钮,
整合到页面中做不同效果,如何整合?点击显示代码,里面源码全部包括,直接将代码复制,改成需要的项目就可以
2.Upload 上传
里面包括各种上传的组件,实现上传文件,这个组件同样将代码提供出来了,另外提供过程中也包含 java 使用代码
3.Table 表格
提供了各种样式的表格
4.Message 消息提示
做很多功能时,成功或是失败会有提示,有不同状态的提示,每个状态都有不同的样式
在实际的工作开发中,美工就是负责页面样式模块的,用了element-ui 就不需要美工了