ElementUI的使用

使用Vue搭建项目的时候，我们会用到一些组件，当然呢一个小的项目的开发不必去浪费太多时间在封装组件上，我们可以去使用现成的组件，去使用已经造好的轮子

这里推荐一个组件库Element，一套基于vue2.0开发的为程序开发者准备的组件库

1 安装

推荐使用npm安装，这样可以很好的配合webpack打包工具使用

npm i element-ui -S

2 引入

在项目的main.js 文件里加入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

Vue.**use**(ElementUI)

new **Vue**({

 el: '#app',

 router,

 store,

 **render**: **h** => **h**(App)

})

3 简单上手使用

以获取后台数据为例，以表格的形式展现,这里已经将Element下载好，并且引入

<tempate>    
<div class="content">    
<el-table :data="tableData" style="width: 100%"> 
<el-table-column
    type="index"
    width="55"
    label="序号">
</el-table-column>     
<el-table-column        
    prop="id"        
    label="栏目编号"        
    width="180">      
</el-table-column>    
<el-table-column        
    prop="name"        
    label="名称"        
    width="180">      
</el-table-column> 
</div>
</tempate>
<script> 
<!--导入-->     
import request from"@/request" 
<!--使用get方法获取数据-->     
exprot default 
    {     
        data(){         
            return{             
                params:
                    {                 
                        page:1,                 
                        pageSize:5             
                    },             
                    tableData:{}         
                  }     
              },     
        methods:{         
            pageQueryfindAll(){             
                request.get('/findAll/pageQuery',{                 
                params: this.params;             
                }).then((res) => {                 
                    this.tableData = res.data             
                    })         
                }         
            },      
        created(){          
            this.pageQueryfindAll(); //查询所有      
            }   
    }
</script>

最终显示：

 当然呢表格里的参数，具体需要传递什么样的，什么类型的参数可以去Element官方文档里去查找，当然样式也有多种，根据需要可以选择不同类型的组件，按需要去选择

官方文档：https://element.eleme.io/#/zh-CN/component/quickstart