Element---基于VUE的桌面端组件库

✨✨博主简介:一个会bbox的‍

✨✨个人主页:沫洺的主页

 系列专栏:  JavaWeb专栏 JavaSE专栏  Java基础专栏

如果文章对你有所帮助请留下三连✨✨

Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页

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

Element 官网：https://element.eleme.cn/#/zh-CNListener

Element 快速入门

1. 引入Element 的css、js文件 和 Vue.js

2. 创建Vue核心对象

3. 官网复制Element组件代码

Element 布局 

Element 中有两种布局方式：

1.Layout 布局：通过基础的 24 分栏，迅速简便地创建布局

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

Layout 布局

Container 布局容器

    
    
    
    
    
    
    
    





    
        
            
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
                
                    
                    
                        
                        选项1
                        选项2
                    
                    
                        选项3
                    
                    
                        
                        选项4-1
                    
                
            
        

        
            
                
                    
                    
                        查看
                        新增
                        删除
                    
                
                王小虎
            

            
                
                    
                    
                    
                    
                    
                    
                
            
        
    

Element 组件

接下来使用element组件制作一个好看的表单

    
    
    
    
    
    
    
    



    
    
        
            
                
                
            
        
        
            
        
        
            
        
        
            查询
        
    
    
    
        批量删除
        新增
    
    
    

        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            

            
                提交
                取消
            
        
    
    
    
    
    
    

说明

将element-ui包放到webapp下

网盘链接：https://pan.baidu.com/s/1NgM50O0X71Qm6LncPyReiw?pwd=wznb 
提取码：wznb