众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率。当然对于前端小白来说,有些遇到的问题需要和大家分享一下。

移动端页面经常都是需要圣杯布局的,可是当静态页面拆分成组件编译以后,往往圣杯布局会失效,以下 是我的解决思路。

1.首先在App.Vue中设置app的样式

<template>
<div id="app">
<router-view/>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
#app{
width:100%;
height:100%;
}
</style>

2.在要设置页面级组件的页面设置如下样式

<template>
<div class="goodsdetail">
<goods-detail-header></goods-detail-header>
<detail-content></detail-content>
<detail-footer></detail-footer>
</div>
</template> <script type="text/ecmascript-6">
import GoodsDetailHeader from "../components/goodsdetail/GoodsDetailHeader.vue";
import DetailContent from "../components/goodsdetail/DetailContent.vue";
import DetailFooter from "../components/goodsdetail/DetailFooter.vue";
export default {
components:{
GoodsDetailHeader,
DetailContent,
DetailFooter
}
}
</script> <style scoped >
html,body{
height:100%;
}
.goodsdetail{
display: flex;
height:100%;
flex-direction: column;
justify-content: space-between;
}
</style>

  这样就可以完美解决。

  

vue-cli中圣杯布局失效问题的更多相关文章

  1. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  4. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  5. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  6. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

  7. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  8. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  9. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

随机推荐

  1. [DevExpress]设置列的时间格式

    方法一 设置DisplayFormatFormatString:gFormatType:DateTime 方法二

  2. what is Servlet Container[转载]

    1 在这个博客中,我将描述一下web服务器.Servlet容器的基本概念,以及Servlet容器和jvm之间的关系.我想要证明的是Servlet容器不过就是一个java程序. 2 什么是web服务器 ...

  3. java操作linux,调用shell命令

    import org.junit.jupiter.api.Test; import java.io.BufferedReader; import java.io.IOException; import ...

  4. ubuntu-10.10嵌入式开发环境搭建【转】

    本文转载自:http://blog.csdn.net/zjhsucceed_329/article/details/8036781 版权声明:本文为博主原创文章,未经博主允许不得转载. ubuntu- ...

  5. Hadoop安装配置(ubuntu-12.04.2-server-amd64)

    环境如下: ubuntu-12.04.2-server-amd64 hadoop-1.0.4 VirtualBox 1.在VBox中安装Ubuntu Server,用户名和密码都是hadoop,安装完 ...

  6. zoj 3822(概率dp)

    ZOJ Problem Set - 3822 Domination Time Limit: 8 Seconds      Memory Limit: 131072 KB      Special Ju ...

  7. 2018.09.08 DL24 Day1 总结

    补一下之前的总结…… T1.restaurant 这道题还是很简单的嘛,子恒dalao非常良心.我们把招牌菜和所需要的菜品绑定在一起就成了完全背包,然后直接跑一遍完全背包即可. #include< ...

  8. 记录一次Mysql死锁排查过程

    背景 以前接触到的数据库死锁,都是批量更新时加锁顺序不一致而导致的死锁,但是上周却遇到了一个很难理解的死锁.借着这个机会又重新学习了一下mysql的死锁知识以及常见的死锁场景.在多方调研以及和同事们的 ...

  9. POJ 3734 Blocks 矩阵递推

    POJ3734 比较简单的递推题目,只需要记录当前两种颜色均为偶数, 只有一种颜色为偶数 两种颜色都为奇数 三个数量即可,递推方程相信大家可以导出. 最后来个快速幂加速即可. #include< ...

  10. 【161】BASH相关文章链接

    ---恢复内容开始--- 1. Linux cat命令详解  --<cat>-- 新建文件 file1.txt,随便输入几行文字 cat 'file1.txt' #显示 'file1.tx ...