vue+koa2 美团开发实战3-首页分析

在开始实现代码之前，我们先来看看美团的网页布局。

大家自己去美团的官网看看，会发现头部和尾部是固定展示的内容，中间的区域随着内容的变化而不同。

那么这个首页的布局使用下面的布局方式，这里我们使用的是elements-ui，使用其他的组件请参考对应的官方文档。

首先我们去除pages/index.vue中的无用代码：

接下里，我们使用element-ui的布局组件，快速构建出我们网页的整体布局。

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

此时我们的页面显示如下：

我们加一下简单的样式：

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: papayawhip;
}
</style>

运行程序，你会发现程序并没有和我们想象的一样正常运行，而是报错了：

ERROR in ./pages/index.vue
Module not found: Error: Can’t resolve ‘sass-loader’ in ‘D:\Programs\vue\qsg-app’

我们先去官网找找能不能解决这个问题：

按照官方文档，我们先来安装一下这个插件，我们在npm的网址找到sass的安装说明。

安装：

yarn add sass-loader node-sass -D

重新运行项目：

注意：

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是 。

好了，按照这种方式，你可以愉快的使用你喜欢的插件了。到这里我们的首页整体布局就完成了。