34ElementUI

知识点-ElementUI的介绍

这是官网 , 看官网能做出来就可以了 https://element.eleme.cn/#/zh-CN

1.目标

饿了吗  项目后台系统就是使用ElementUI来构建页面. 

2.路径

• ElementUI介绍
• ElementUI的使用前的导入

3.讲解

3.1 什么是ElementUI

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

3.2ElementUI的使用前的导入

在页面上引入 js 和 css 文件即可开始使用，如下：

4.小结

1. ElementUI是饿了么开发的一套基于vue的组件库, 适合做后台管理系统页面
2. 使用步骤
   • 导入ElementUI
   • 创建vue实例

知识点-常用组件

1.目标

• 了解ElementUI常用组件使用

2.路径

• Container 布局容器
• Dropdown 下拉菜单
• NavMenu 导航菜单
• Table 表格
• Pagination 分页
• Message 消息提示
• Tabs 标签页
• Form 表单

3.讲解

3.1 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列

> ：顶栏容器
> 
> ：侧边栏容器
> 
> ：主要区域容器
> 
> ：底栏容器

  
      

        
          Header
          
            Aside
            
              Main
              Footer
            
          
        
      
      
    
    

3.2 Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

  个人中心
  
    退出系统
    修改密码
    联系管理员
  

3.3 NavMenu 导航菜单

为网站提供导航功能的菜单。

  
    
    选项1
    选项2
    选项3
  
  
    
    选项1
    选项2
    选项3
  

3.4 Table 表格【重要】

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

3.5 Pagination 分页【重要】

当数据量过多时，使用分页分解数据。

3.6 Message 消息提示【重要】

常用于主动操作后的反馈提示。

消息
成功
警告
错误

3.7 Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础的、简洁的标签页


  用户管理
  配置管理
  角色管理
  定时任务补偿

选项卡样式的标签页

  用户管理
  配置管理
  角色管理
  定时任务补偿

卡片化的标签页

  用户管理
  配置管理
  角色管理
  定时任务补偿

3.8 Form 表单【重要】

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

  
  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
  

4.小结

1. 大家根据官网过一遍, 目的后面的饿了吗项目 不怕页面就行了