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

在开始实现代码之前,我们先来看看美团的网页布局。
vue+koa2 美团开发实战3-首页分析_第1张图片
vue+koa2 美团开发实战3-首页分析_第2张图片

vue+koa2 美团开发实战3-首页分析_第3张图片

vue+koa2 美团开发实战3-首页分析_第4张图片
大家自己去美团的官网看看,会发现头部和尾部是固定展示的内容,中间的区域随着内容的变化而不同。

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

vue+koa2 美团开发实战3-首页分析_第5张图片

首先我们去除pages/index.vue中的无用代码:
vue+koa2 美团开发实战3-首页分析_第6张图片

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


vue+koa2 美团开发实战3-首页分析_第7张图片

此时我们的页面显示如下:
vue+koa2 美团开发实战3-首页分析_第8张图片

我们加一下简单的样式:


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

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

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

vue+koa2 美团开发实战3-首页分析_第9张图片
vue+koa2 美团开发实战3-首页分析_第10张图片
按照官方文档,我们先来安装一下这个插件,我们在npm的网址找到sass的安装说明。
vue+koa2 美团开发实战3-首页分析_第11张图片

安装:

yarn add sass-loader node-sass -D

重新运行项目:
vue+koa2 美团开发实战3-首页分析_第12张图片
注意:

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

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

你可能感兴趣的:(koa,nuxt,Vue)