Nuxt去掉body中默认的边距

最新推荐文章于 2024-07-19 11:07:41 发布
最新推荐文章于 2024-07-19 11:07:41 发布
阅读量290 收藏 2
点赞数 1
分类专栏： nuxt 前端 文章标签： vue.js 前端 css node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38582398/article/details/129285044
版权
在Vue开发中，通常在app.vue设置body样式去掉边距。但在Nuxt项目中，由于没有app.vue，需修改nuxt.config.js。通过在head对象添加bodyAttrs，设置style属性为height:100%;margin:0;padding:0;，重新编译并刷新页面后，可以消除页面的白边。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

在平常使用vue开发时我们能够很轻易地去掉网页的边距，只需要在app.vue的css中加入

body { height: 100%; margin:0; padding: 0; }

但是在nuxt项目中，是没有app.vue这个文件的，那么nuxt项目中要怎么去掉默认的白边呢？

1677657884344.png

解决方法

  1. 首先在项目根目录找到nuxt.config.js

1677653227664.png

  1. 修改nuxt.config.js中的head对象

在head对象中加入如下代码

bodyAttrs: { style: 'height: 100%; margin:0; padding: 0;' },

1677653416356.png

  1. 验证结果

重新编译后按ctrl+f5刷新页面可以看到讨厌的白边消失了

1677653609523.png

----- 前端面试题 -----
weixin_53170812的博客
07-30 743
HTML5新增的元素 首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和w
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1677
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
Nuxt3去掉body中默认的边距
04-16 516
在nuxt.config.ts中添加以下一行即可。
清空默认边距
jwz934738949的博客
04-20 447
在我们编写网页的过程中，一个div标签往往存在着默认的边距，要想消除边距我们需要将外边距和内边距设置为0。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>标题</title> <style> /* 在企业开发中，一般不会使用通配符选择...
前端CSS样式去除body默认边距和a标签下划线去除和高亮显示问题
weixin_41987434的博客
06-18 919
前端CSS样式去除body默认边距和a标签下划线去除和高亮显示问题
nuxt如何将js文件放在＜/body＞前
fdw630的博客
06-17 1222
nuxt如何将js文件放在前
NuxtJS Web 开发实用指南（三）
龙哥盟
07-19 509
组件是单一的、自包含的、可重用的 Vue 实例，具有自定义名称。我们使用 Vue 的component方法来定义组件。例如，如果我们想定义一个名为post-itemdata () {' }},})做完这些之后，当使用new语句创建根 Vue 实例时，我们可以在 HTML 文档中将此组件用作</div></script>所有组件本质上都是 Vue 实例。这意味着它们具有与new Vue相同的选项（datacomputedwatchmethods等），只是少了一些根特定的选项，比如el。
如何在Nuxt 3中为<html>和<body>标签添加Tailwind CSS类？
4G/5G随身WiFi专业DIY改装
09-05 408
在 Nuxt 3 中为 <html> 和 <body> 标签添加 Tailwind CSS 类，可以参考以下步骤：安装 Tailwind CSS：在项目根目录下运行以下命令安装 Tailwind CSS 和其依赖：npm install tailwindcss@latest @tailwindcss...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
A曾大大的博客
04-15 926
本篇文章整理总结了一些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上： css相关 更多教程：https://sucaiip.com/ 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高，垂直 4.表格，center,middle；水平垂直 5.disp...
Nuxt-js-综合案例（27）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
07-28 613
Nuxt.js 综合案例 介绍 GitHub仓库：https://github.com/gothinkster/realworld 在线示例：https://demo.realworld.io/#/ 接口文档：https://github.com/gothinkster/realworld/tree/master/api 页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.m
【成神之路】Nuxt入门
weixin_47918681的博客
05-08 1741
1. Nuxt.js 概述 1.1 我们一起做过的SPA SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。 我们之前学习的Vue就是SPA中的佼佼者。 SPA 应用广泛用于对SEO要求不高的场景中 1.2 什么是SEO SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容
Nuxt 学习笔记
qq_49487356的博客
10-22 1967
nuxt学习笔记
Nuxt的默认模板和默认布局
zjsfdx的博客
08-28 7599
在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。 默认模板 Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.html就可以实现了。现在...
nuxt.js 项目的使用
维克多噗噗的博客
07-02 3579
运行图 安装 npx create-nuxt-app project 配置 koa + axios typescript-vuex github ui框架 element-ui 目录结构 assets —资源目录 layouts —布局目录 middleware —中间件目录 plugins —插件目录 static —静态(后台) 在您的 vue 模板中, 如果你需要引入 a...
vue单独给页面设置body属性
weixin_30877755的博客
11-07 4223
因项目需求：用户个人详细信息页面设置背景色，之前在这个页面设置最外层div发现不行。因为app.vue影响了它。后来直接在页面上用body设置样式，发现影响了其他页面。 后来想了通过vue的生命周期来解决。这个页面创建前设置我的样式，销毁之前移除我设置的样式。 代码如下： //创建前设置 beforeCreate () { document.querySelector('...
Nuxt详解+案例
热门推荐
M_wzz的博客
12-13 1万+
Nuxt1. Nuxt.js 概述1.1 我们一起做过的SPA1.2 什么是SEO1.3 什么是SSR技术1.4 SPA和SSR对比1.5 什么是Nuxt.js2 入门案例2.1 create-nuxt-app 介绍2.2 安装2.3 启动2.4 访问3. 目录结构3.1 目录3.2 别名4 路由4.1 路由概述4.2 基础路由4.3 动态路由4.4 动态命名路由4.5 默认路由4.6 嵌套路由(懂就????)4.7 过渡动效（了解就????）4.7.1 全局过渡动效设置4.7.1 自定义动画 1. Nux
nuxt开发总结及爬坑记录
weixin_45815859的博客
03-11 1521
众所周知 vue开发的SPA（单页应用）不利于搜索引擎的SEO优化。 Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO问题，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息 对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的。 一、targe nuxt.config.js 中target属性 server(默认).
nuxt的使用
qq_41429765的博客
10-02 2704
1.首先创建项目运行命令 vue init nuxt-community/starter-template projectname 若执行命令报错， 请全局执行 npm install -g @vue/cli-init 正常执行命令创建项目之后，查看项目的package.json文件运行 npm install命令下载包 认识目录 .nuxt自动生成的 assets静态资源目录（放些less，sass，javaScript） layouts用作布局的相当于全局父级，其中的v.
nuxt 服务端渲染
Y_Z233的博客
03-09 2331
nuxt 服务端渲染
nuxt3 body加上noscript
最新发布
10-19
关于在 Nuxt 3 中添加 `noscript` 元素到页面的 `body` 部分，`noscript` 标签通常用于指示在当前浏览器环境中 JavaScript 未启用时的内容呈现。 当你需要告知搜索引擎或者其他访问者，如果他们禁用了 JavaScript，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值