VUE项目学习笔记:页面无法铺满整个屏幕
VUE初始项目页面整体无法铺满整个屏幕1、出现的问题在VUE初始项目运行后,页面整体无法铺满整个屏幕,如下图所示2、出现问题的原因和解决(1)主要是因为vue-cli脚手架搭建的vue项目中的App.vue作为页面的核心,存在默认设定样式间隔,造成无法顶格显示解决办法:删除这段样式代码即可。(2)删除完成之后发现,页面还是无法铺满整个屏幕,如下图所示:解决办法:重新设定App.vue的间隔样式,如
·
VUE项目学习笔记:页面无法铺满整个屏幕
1、出现的问题
在VUE初始项目运行后,页面整体无法铺满整个屏幕,如下图所示
2、出现问题的原因和解决
(1)主要是因为vue-cli脚手架搭建的vue项目中的App.vue作为页面的核心,存在默认设定样式间隔,造成无法顶格显示
解决办法:删除这段样式代码即可。
(2)删除完成之后发现,页面还是无法铺满整个屏幕,如下图所示:
解决办法:重新设定App.vue的间隔样式,如下图所示:
3、解决完成之后的效果:
4、整个App.vue文件的代码
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: -8px -8px auto;
}
</style>
更多推荐
已为社区贡献17条内容
所有评论(0)