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 布局，使用前请确定目标浏览器是否兼容。此外，的子元素只能是后四者，后四者的父元素也只能是。

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

vue+koa2 美团开发实战3-首页分析相关推荐

《Spring Boot+Vue全栈开发实战》读书笔记
写在前面嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...
Lison《vue技术栈开发实战》（一）
Lison<vue技术栈开发实战>(一) 第01章使用vue-cli3创建项目使用Vue UI创建.管理项目项目结构目录整理初始文件添加基本配置详解使用代理解决跨域第02章 ...
ehcache springboot_阿里内部进阶学习SpringBoot+Vue全栈开发实战文档
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置烦琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...
Spring Boot+Vue全栈开发实战——花了一个礼拜读懂了这本书
很幸运能够阅读王松老师的<Spring Boot+Vue全栈开发实战>这本书!之前也看过Spring Boot与Vue的相关知识,自己也会使用了Spring Boot+Vue进行开发项目. ...
Lison《vue技术栈开发实战》（二）
Lison<vue技术栈开发实战>(二) 状态管理bus的使用父子组件通信 v-model语法糖使用bus通信状态管理Vuex(一) state和getter 辅助函数的使用模块中 ...
Lison《vue技术栈开发实战》（三）
Lison<vue技术栈开发实战>(三) Ajax请求实战解决跨域问题封装axios 请求拦截响应拦截队列管理使用Mock模拟Ajax请求响应模拟 Mock用法精讲数据模板 ...
Lison《vue技术栈开发实战》（四）
Lison<vue技术栈开发实战>(四) 从SplitPane组件谈Vue中"操作"DOM 简单两列布局如何让两个div改变宽度鼠标拖动效果 v-model和.sy ...
读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言第九章 Spring Boot缓存第十章 Spring Boot安全管理第十一章 S ...
《SpringBoot+vue全栈开发实战项目》笔记
前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...

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

vue+koa2 美团开发实战3-首页分析相关推荐

最新文章

热门文章