闲言碎语
hi~好久不见，我又出来继续挖坑了。接着上一篇的内容，这篇将会引入element-ui来修改工程模板里面的页面。构思了相当就的页面大致长成这个丑样子。希望不要嫌弃。
简单的说一下，那个区域的功能：左边，橙色区域是代码编辑区域；右上角，黄色区域是功能按键堆积区域；右下角是nodemcu串口输出的显示区域。
写这篇文章的时候家里的火龙果开火了。于是，我把工程命名为pitaya，并同步到GitHub(pitaya)上，感兴趣的可以clone着玩。
第一步
由于需要用到elementUI。在npm之前记得把路径切换到app文件夹下面。然后使用npm i element-ui -S来安装elementUI。
接着定位到\app\src\renderer。这文件夹下面存放的和页面有关的文件。找到main.js，插入下面三句代码。这样我们就可以使用elementUI了。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
renderer文件夹下面还有个app.vue和routes.js两个文件。app.vue是一个单文件组件，main.js加载这个文件，可以认为app.vue是个入口文件；routes.js是路由文件，我不是很知道这个干嘛用的。
这里打开app.vue文件，把style标签里面的内容改成这样的，
第二步
上面简单的修改文件后，原来的工程就变得面目全非了。接下来，这一步会让工程变得和开头的图片一样。
定位到components文件夹下面，可以看到LandingPageView.vue和LandingPageView文件夹。这两个是相呼应的。
LandingPageView文件夹里面存放了一下子组件，在LandingPageView.vue文件中被用到。后面我们如果有创建一些组件，就扔在这个文件夹里面。
routes.js里面将LandingPageView.vue设定为根文件，也就是打开后最先加载这个页面。工程模板里面，这个文件加载了其他3个组件。所以，我们要得到上图的效果，就要拿这个来开刀。
一行两列
借助element来实现一行两列。关于布局的内容，看这里☞Layout 布局。
el-row嵌套了两个el-col标签，实现一行两列的效果。第二个el-col标签嵌套了2个DIV，实现上下两行的效果。
当然，要实现上面的效果，还要配合样式一起来。
最后删掉script标签里面没用的内容，变成下面这样子。
效果如GIF那样。因为使用响应式布局，在拖动的时候区域会发生变化。
关于模板的修改就先说到这里，下一篇文章开始讲子组件的内容（折腾起来真的太费劲了，希望还有下一篇）。