【elementUI学习第三步——Layout 布局】

Step1 components中的Layout.vue

<template>
  <div>
    <h1>layout组件使用</h1>
    <el-row>
      <el-col :span="6"><div style="border: 1px blue solid">盒子1</div></el-col>
      <el-col :span="6"><div style="border: 1px blue solid">盒子2</div></el-col>
      <el-col :span="6"><div style="border: 1px blue solid">盒子3</div></el-col>
      <el-col :span="6"><div style="border: 1px blue solid">盒子4</div></el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name:"Layout",
    data(){

    }
  }
</script>

Step2 router文件中的index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Button from '../components/Button.vue'
import Link from '../components/Link.vue'
import Layout from '../components/Layout.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/button', component: Button},
    {path: '/link', component: Link},
    {path: '/layout', component: Layout},
  ]
})

Step 3 根目录中的App.vue

同学习第二步