使用 CSS 设置 vue 模板样式的问题答案

【问题标题】：Issue in using CSS to styling a vue template使用 CSS 设置 vue 模板样式的问题
【发布时间】：2019-05-27 01:08:23
【问题描述】：

我正在做一个登录页面，但在使用 css 设置 vue 模板样式时遇到了问题。

没有 vue 我可以正常工作，这是我的代码：

HTML

<body class="text-center">
    <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
</body>

CSS

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

当我在 Vue 模板中做同样的事情时，它不起作用，因为我在 css 中使用标签 html 和 body。如何在不使用 html 和 body 标签的情况下在 vue 模板中实现相同的结果（样式化）。

使用推荐的内容：

with vue

without vue

它比以前工作得更好，但它仍然不能 100% 工作，我之前尝试过，这也发生了，知道如何解决吗？

【问题讨论】：

您使用的是单文件组件吗？或者只是定义你的组件，比如Vue.omponent('comp-name',{template:...})
它是一个单一的文件组件
您能否展示一下到目前为止您是如何做到的以及您的项目结构？
它是一个 vue cli 项目，这是一个视图，它是一个 login.vue 文件，你想让我向你展示我的视图代码吗？
你有没有通过那个包装器和height:100%尝试我的解决方案？

标签： html css vue.js vuejs2

【解决方案1】：

请仔细阅读有关 vue 工作原理的文档。通常 vue 连接到 div#app 并且所有都在那里进行，因此在 inside 组件中编写样式您无法访问 body 和 html 标签。如果您确实需要为这些标签添加这些样式，您可以使用外部 CSS 文件并将其连接到 HTML。但是尽量避免在 index.html 中直接做一些 CSS，因为以后你可能会忘记你是在哪里做的，所以你会花费很多时间来寻找它。

我看不出有什么理由按你的意愿去做。不用碰html和body就可以轻松搞定。

【讨论】：