闲言碎语
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标签里面的内容改成这样的，
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app { height: 100%; }
</style>
第二步
上面简单的修改文件后，原来的工程就变得面目全非了。接下来，这一步会让工程变得和开头的图片一样。
定位到components文件夹下面，可以看到LandingPageView.vue和LandingPageView文件夹。这两个是相呼应的。
LandingPageView文件夹里面存放了一下子组件，在LandingPageView.vue文件中被用到。后面我们如果有创建一些组件，就扔在这个文件夹里面。
routes.js里面将LandingPageView.vue设定为根文件，也就是打开后最先加载这个页面。工程模板里面，这个文件加载了其他3个组件。所以，我们要得到上图的效果，就要拿这个来开刀。
一行两列
借助element来实现一行两列。关于布局的内容，看这里☞Layout 布局。
<div style="height: 100%;">
<el-row style="height: 100%;">
<el-col :xs="18" :sm="14" :md="16" :lg="18" style="height: 100%;"><div class="code"></div></el-col>
<el-col :xs="6" :sm="10" :md="8" :lg="6" style="height: 100%;">
<div class="button">
</div>
<div class="output">
</div>
</el-col>
</el-row>
</div>
el-row嵌套了两个el-col标签，实现一行两列的效果。第二个el-col标签嵌套了2个DIV，实现上下两行的效果。
当然，要实现上面的效果，还要配合样式一起来。
<style scoped>
.code {
background: #FF8;
height: 100%;
padding-right: 2px;
}
.button {
background: #FA6;
height: 30%;
padding-left: 2px;
}
.output {
background: #AC9;
height: 70%;
padding-left: 2px;
}
</style>
最后删掉script标签里面没用的内容，变成下面这样子。
<script>
export default {
components: {
},
name: 'landing-page'
}
</script>
效果如GIF那样。因为使用响应式布局，在拖动的时候区域会发生变化。
效果图
关于模板的修改就先说到这里，下一篇文章开始讲子组件的内容（折腾起来真的太费劲了，希望还有下一篇）。
网友评论