初始elementUI

我们之前介绍过bootstrap，它提供了一整套的css样式、布局、JavaScript插件等，十分好用，后来学习vue过程中，发现elementUI是支持vue开发，可以和vue更好的结合在一起，那么就看了看文档，那么这里简单介绍一下吧：

与bootstrap一样，element的布局也是分行和列的，列包含在行内：

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
</style>

效果如下：

分成了2行，第一行1列，第二行2列。

除了布局之外，它也提供很多组件，比如常用的走马灯：

日历：

等等，很多组件，节省很多我们的时间，不用换来开发这些，尤其对后端狗