高质量前端搬砖人必会——element UI（学生管理系统前端1）

目录

一、介绍

二、使用

2.1 安装

2.2 使用组件介绍

三、结合具体案例使用

3.1 案例效果和整体代码

​

 3.2 确定页面整体布局（container布局容器）

 3.3 确定导航栏

3.4 面包屑

 3.5 文件上传（upload）

3.6 按钮的选择（button）

四、学习感悟

---

一、介绍

        element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

（1）element UI是基于Vue2.0的

（2）element UI提供一组组件

（3）element UI提供参考示例，可直接复制粘贴，自己稍加改造即可。（这点是我觉得最方便也最喜欢的）

二、使用

2.1 安装

方法一：npm安装

        官方推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。（不过对于前端小白来说，入门不建议通过这种方法）

npm i element-ui -S

方法二：CDN导入

        这种方法对于小白入门来说较为友好，直接在js代码的节点中引入下面两行代码即可：

2.2 使用组件介绍

        element UI中的组件主要分为这么几大类：

（1）basic：该组件的主要功能是设计页面布局，页面色彩，字体，页面边框，各类图标、按钮等

（2）form：该类组件中主要为选择框、输入框、计数器、各类选择器、滑块、开关、评分页面、文件上传页面等组件。

（3）data：包含表格、标签、进度条、分页、头像、标记等我们经常使用的用于展示或提醒信息的组件

（4）notice：顾名思义，主要是用于消息提醒的组件

（5）navigation：该类主要用于网页的整体布局，例如导航菜单、标签、页头、面包屑等

（6）others

三、结合具体案例使用

3.1 案例效果和整体代码

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  

  
  
    

      
      
        Header
        
          
            
            
              
                
                
                  
                  选项1
                  选项2
                
                
                  选项3
                
                
                  
                  选项1
                
              
              
                
                导航二
              
              
              
                
                导航三
              
              
                
                导航四
              
            
          

          
            
            
              
              
                
                首页
                活动管理
                活动列表
                活动详情
              
              
              
              
                
                  
                    
                      
                    
                  

                  
                    
                      查询
                      全部
                      添加
                    
                  

                  
                    
                    
                      点击上传
                    
                  

                  
                    点击下载
                  
                
              
              
              
              
               
                
                
                
                
                
                
                
                
                
                 
                  
                 
                  
                  
                  
                 
              
              
               
                            
                                
                                    批量删除
                            
                            
                                
                                
                            
                        
              
            

            Footer
          
        
      
    
  

 3.2 确定页面整体布局（container布局容器）

  Header
  
    Aside
    
      Main
      Footer
    
  

效果如图：

 3.3 确定导航栏

 
    
默认颜色
    
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项1
        
      
      
        
        导航二
      
      
        
        导航三
      
      
        
        导航四
      
    
  

效果：

3.4 面包屑

  首页
  活动管理
  活动列表
  活动详情

 

 3.5 文件上传（upload）

  点击上传
  
只能上传jpg/png文件，且不超过500kb

效果：

3.6 按钮的选择（button）

 效果：需要注意的一点是按钮的图标是可以自己根据elementUI提供的icon进行更换（替换icon的内容即可）。

四、学习感悟

        结合一些开源的前端组件库，极大的降低了前端页面设计和开发的门槛，通过复制粘贴和一些简单地组合修改便可以设计出一个整洁美观的前端网页。善于利用开源库和开员工具辅助设计，提高开发效率。