vue element框架中el-row控件里按列排列失效问题的解决

最近我在使用vue的ui框架element-ui，可能是自己经验不足，遇到了很奇怪的问题，在这里特意把解决的步骤记录一下，希望能对大家有所帮助。
首先我使用的分栏间隔的布局方式，参照官网上的例子：

应该效果如下图：

但是我在参考例子后，代码如下：
App.vue

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: ''
})

可是效果如下：

奇怪了，为何布局变成了纵向，明明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: ''
})

这个时候效果如下，应该是我们希望看到的，至少列生效了：

我看了一下文档，发现并没有特别指出这一行的配置，可能是我遗漏了或者其他的原因导致的，也有可能是官网没有标识出这一点。总之加上了这一行配置解决了我的问题。在这里做一个笔记，也希望能够帮助到遇到类似的问题的同学。