在 vue 组件中使用样式的最佳实践是什么？答案

【问题标题】：Whats the best practice to use styles in vue components?在 vue 组件中使用样式的最佳实践是什么？
【发布时间】：2020-10-11 18:31:31
【问题描述】：

我正在使用 vue cli 创建项目，但我的样式出现“错误”

我只是测试一个有 3 行 20vh 50vh 30vh 的组件

<template>
    <div class="gridContact">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</template>
<style scoped>
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
    .one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
    .two {grid-area: two; background: cadetblue;  box-sizing: border-box; height:50vh;}
    .three {grid-area: three; background: coral;  box-sizing: border-box; height: 30vh; }
</style>

还有我的 app.vue

*{padding: 0; margin: 0; box-sizing: border-box;}

我得到了这种风格（需要的风格）

但是如果我刷新页面，我得到了这个破坏样式的空白，然后如果再次重新加载它看起来不错，然后如果我刷新我得到相同的空白，为什么？

在开发者工具上检查这个行为我看到这个属性注入了，当然那个边距不是我插入的，我认为这是在 vue 中做出的行为，也许是作用域属性？但为什么呢？干什么用的？如何解决？

【问题讨论】：

您是否使用过开发工具来查看填充该空间的内容？
当然，它说的是 html，但正如您在代码中看到的那样，我不明白为什么会发生这种情况@Daniel_Knights
我也不明白为什么。尝试在gridContact 上使用height: 100vh，然后在孩子身上使用百分比
是的，我也知道，但我认为这是一个 vue 的“错误”，因为我用 vanilla html 做了同样的练习，而那个“错误”没有显示出来，我很想解决这个问题，但我真的想要要知道vue中的真正解释。感谢您的帮助
这是因为 vue 应用程序中包含的样式实际上仅适用于应用程序，而不是整个页面。因此，您的“*”规则不适用于页面的正文（至少这是我的猜测）

标签： html css vue.js vuejs2

【解决方案1】：

你不知道 body 的 margin-bottom 是从哪里应用的，就像下面的例子一样，我故意将 margin-bottom 添加到 body 并应用了你的样式。

.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
    .one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
    .two {grid-area: two; background: cadetblue;  box-sizing: border-box; height:50vh;}
    .three {grid-area: three; background: coral;  box-sizing: border-box; height: 30vh; }

body{
  margin-bottom:50px;
}

*{padding: 0px; margin: 0px; box-sizing: border-box;}

<body>
<div class="gridContact">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
  </div>
 </body>

现在我添加了 !important 来强制应用我的 css 样式并且它起作用了。

.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
    .one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
    .two {grid-area: two; background: cadetblue;  box-sizing: border-box; height:50vh;}
    .three {grid-area: three; background: coral;  box-sizing: border-box; height: 30vh; }

body{
  margin-bottom:50px;
}

*{padding: 0px !important; margin: 0px !important; box-sizing: border-box;}

<body>
<div class="gridContact">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
  </div>
 </body>

【讨论】：

你好，我也这样做了，你知道吗？如果多次刷新页面（f5），margin又回来了，这可能是vue错误吗？
多次表示缓存问题，如果按ctrl+f5，每次都会得到相同的结果。
我删除了缓存，现在我尝试创建一个新项目

【解决方案2】：

在 Vue 中，当我们使用带有样式标签的作用域属性时，CSS 将仅适用于当前组件。

当您在 *{} 中声明边距时，它无法正常工作，因为将 scoped 属性与样式标签一起使用是一样的。

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

您可以将 !important 与 *{} 中的边距属性一起使用。

Vue.js 2 - Remove initial margin from body tag

你也可以通过这个链接： https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/

【讨论】：

你好，我也这样做了，你知道吗？如果多次刷新页面（f5），margin又回来了，这可能是vue错误吗？

【解决方案3】：

如果边距是自动注入的，则在所有浏览器中检查应用程序。因为有些浏览器会自动注入底部边距。

您可以通过添加来防止它， {margin-bottom: 0 !important} 到那个组件

或

#app {高度：100vh}

【讨论】：

我添加了该样式属性并仍然注入边距，对于应用程序高度，我只想将该高度添加到某些组件，而不是整个应用程序