问题分析
我是使用 vue + vite,通过以下命令创建的项目。
npm create vite@latest vue-template-plus -- --template vue
创建好后我们启动项目,会发现 #app 这个 div 的最大宽度设置了 1280 px。
网上很多方法都是在 App.vue 加上像以下样式让 #app 这个 div 铺满页面。
html,body,#app{
width: 100;
height: 100%;
margin: 0 0;
padding: 0;
}
在 vue 2.0 的时候这个方法可以解决,但是在 vue 3.0 却解决不了。
因为在 vue 3.0 在项目创建的时候就有默认的样式。其实在 main.js 这里 vue 默认引用了一个 style.css,这个 css 文件里设置了vue 默认的样式。如果我们不需要默认的样式可以直接去掉这个样式的引用。
解决方法
既然我们找到了这个默认的样式文件,只需要在里面找到 #app 的样式进行修改既可,可以看到这里就是限制了 #app 最大宽度为 1280 px。
现在我们把这个 #app 的样式修改为以下内容就能让 #app 这个 div 铺满整个页面了。不需要在 App.vue 这个页面增加或修改样式。
#app {
width: 100%;
margin: 0 auto;
height: 100%;
text-align: center;
}
如有错误还请大家多多指出,让我们共同进步,谢谢。能帮助到你的话也请动动发财的小手帮忙点个赞,感谢。