Vue 组件库：Element

Element 介绍

什么是 Element ？

• Element 是网站快速成型工具，是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。

• 组件：组成网页的部件，例如超链接、按钮、图片、表格等等。

• 使用 Element 的前提是必须要有 Vue。

• Element 官网

样式示例：

• 自己完成的按钮：
  

• Element 提供的按钮：
  

Element 快速入门

开发步骤：

1. 下载 Element 核心库。
2. 引入 Element 样式文件。
3. 引入 Vue 核心 js 文件。
4. 引入 Element 核心 js 文件。
5. 编写按钮标签。
6. 通过 Vue 核心对象加载元素。

    
    
    
    
    
    
    
    


    我是按钮
    

    

        
            默认按钮
            主要按钮
            成功按钮
            信息按钮
            警告按钮
            危险按钮
        
        

        
            朴素按钮
            主要按钮
            成功按钮
            信息按钮
            警告按钮
            危险按钮
        
        

        
            圆角按钮
            主要按钮
            成功按钮
            信息按钮
            警告按钮
            危险按钮
        
        

        
            
            
            
            
            
            
        
    

页面效果：

Element 常用组件

基础布局

Element 基础布局可以将页面分成最多 24 个部分（列），且可以自由切分。

示例：

    
    
    
    
    
    
    
    
    
    


    我是按钮
    

    

        
            
            

        
        
            

            

        
        
            

            

            

        
        
            

            

            

            

        
        
            

            

            

            

            

            

        
    

页面效果：

容器布局

容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域。

示例：

    
    
    
    
    
    
    
    
    
    


    

        
        
            头部区域
            
                侧边栏区域
                
                    主区域
                    底部区域
                
            
        
    

页面效果：

表单组件

表单：由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

示例：

    
    
    
    
    
    
    
    


    

        

            
                
            

            
                
                    
                    
                
            

            
                
                    
                        
                    
                
                -
                
                    
                        
                    
                
            

            
                
            

            
                
                    
                    
                    
                    
                
            

            
                
                    
                    
                
            

            
                
            

            
                立即创建
                重置
            

        
    

页面效果：

表格组件

表格：用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

示例：

页面效果：

顶部导航栏组件

示例：

    
    
    
    
    
    
    
    


    

        
            处理中心

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

            消息中心

            订单管理

        
    

侧边导航栏组件

示例：

    
    
    
    
    
    
    
    


    

          
            

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

                
                    
                    导航二
                

                
                    
                    导航三
                

                
                    
                    导航四