vue element框架中el-row控件裏按列排列失效問題的解決

最近我在使用vue的ui框架element-ui，可能是自己經驗不足，遇到了很奇怪的問題，在這裏特意把解決的步驟記錄一下，希望能對大家有所幫助。
首先我使用的分欄間隔的佈局方式，參照官網上的例子：

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .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;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

應該效果如下圖：

但是我在參考例子後，代碼如下：
App.vue

<template>
  <div id="app">
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
</el-row>
</div>
</template>

<script>

</script>


<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 14px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 14px;
    min-height: 36px;
  }
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

可是效果如下：

奇怪了，爲何佈局變成了縱向，明明row中的佈局應該是按列排列的。經過排查發現自己少了這一行：import ‘element-theme-chalk’;
也就是代碼應該如下：
main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
import 'element-theme-chalk';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

這個時候效果如下，應該是我們希望看到的，至少列生效了：

我看了一下文檔，發現並沒有特別指出這一行的配置，可能是我遺漏了或者其他的原因導致的，也有可能是官網沒有標識出這一點。總之加上了這一行配置解決了我的問題。在這裏做一個筆記，也希望能夠幫助到遇到類似的問題的同學。