Element-UI库

Element-UI库

1.npm安装
npm i element-ui -S
2.引入Element (在main.js)

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

layout布局

 <h3>4等分布局</h3>
       <!-- 
           el-row 行 gutter:每个容器之间的间距 一行中的几个
           el-col 列
        -->

       <el-row :gutter='20'>
           <el-col :span='6'> <div class="content">1</div></el-col>
           <el-col :span='6'> <div class="content">2</div></el-col>
           <el-col :span='6'> <div class="content">3</div></el-col>
           <el-col :span='6'> <div class="content">4</div></el-col>
       </el-row>

container容器布局

<el-container>
           <el-header>Header</el-header>
           <el-main>main</el-main>
           <el-footer>footer</el-footer>
       </el-container>

2.弹出类型组件
3.表格组件