使用 CSS 为 Vue 组件添加样式

使用 CSS 样式化 Vue 组件

在继续向我们的应用程序添加更多高级功能之前，我们应该添加一些基本的 CSS 使其看起来更好。Vue 具有三种样式化应用程序的方法：

• 外部 CSS 文件。
• 单文件组件（.vue 文件）中的全局样式。
• 单文件组件中组件范围的样式。

为帮助你熟悉每个应用程序，我们将所有三个功能结合使用，以使我们的应用程序具有更好的外观。

外部 CSS 文件的样式

你可以包括外部 CSS 文件，并将其全局应用于你的应用程序。让我们看看这是如何完成的。

首先，在 src/assets 目录中创建一个名为 reset.css 的文件。Webpack 将处理此文件夹中的文件。这意味着我们可以使用 CSS 预处理器（如 SCSS）或后处理器（如 PostCSS）。

尽管本教程不会使用此类工具，但最好知道在资源文件夹中包含此类代码后，它将自动进行处理。

将以下内容添加到 reset.css 文件中：

接下来，在 src/main.js 文件中，如下导入 reset.css 文件：

这将导致在构建步骤中拾取文件并自动将其添加到我们的网站。

重置样式应立即应用于该应用。下图显示了应用重置前后应用程序的外观。

之前：

之后：

显著的更改包括列表项目符号删除、背景颜色更改以及基本按钮和输入样式更改。

向单文件组件添加全局样式

现在，我们已将 CSS 重置为在浏览器之间统一，需要对样式进行更多自定义。我们希望将某些样式应用于应用程序中的各个组件。虽然可以直接将这些文件添加到 reset.css 样式表中，但是我们将它们添加到 App.vue 文件的 <style> 标签中，以演示如何使用它们。

文件中已经存在一些样式。让我们删除它们，并用下面的样式替换它们。这些样式可以做一些事情——为按钮和输入添加一些样式，并自定义 #app 元素及其子元素。

更新 App.vue 文件的 <style> 元素，如下所示：

如果检查该应用，会发现我们的 todo 列表目前在卡片中呈现，一些 to-do 项目已经有了更好的格式。现在我们可以直截了当地开始编辑我们的组件，来使用这些样式。

在 Vue 中添加 CSS 类

我们应当在 ToDoForm 组件中的 <button> 元素上应用 CSS 按钮类。由于 Vue 模板是有效的 HTML 代码，这个步骤的实现与在纯 HTML 上实现类似——通过在元素中添加 class="" 属性实现。

在表单中的 <button> 元素上添加 class="btn btn__primary btn__lg"：

我们可以做更多的语义和风格上的变化。由于我们的表格表示我们页面的一个特定部分，可以通过使用一个 <h2> 元素受益。然而，标签已经表明了表单的目的。为了避免重复，让我们用一个 <h2> 来包装我们的标签。还有一些其他的全局 CSS 样式，我们也可以添加。我们还将把 input__lg 类添加到我们的 <input> 元素中。

更新你的 ToDoForm 模板，它看起来像这样：

让我们也在 App.vue 文件中的 <ul> 标签上添加 stack-large 类。这将有助于改善我们待办事项的间距。

将它更新为这样：

添加作用域样式

我们要添加样式的最后一个组件是我们的 ToDoItem 组件。为了使样式的定义靠近组件，我们可以在它里面添加一个 <style> 元素。然而，如果这些样式改变了这个组件之外的东西，要追踪到负责的样式并解决这个问题可能会很困难。这就是 scoped 属性有用的地方——它为你所有的样式附加了一个独特的 HTML data 属性选择器，防止它们在全局范围内发生冲突。

要使用 scoped 标识符，在 ToDoItem.vue 中创建一个 <style> 元素，位于文件的底部，并给它 scoped 属性：

然后，将以下 CSS 代码复制到新创建的 <style> 元素中：

现在我们需要在模板中添加一些 CSS 类来与我们的样式连接。

在根 <div> 中，添加一个 custom-checkbox 类。在 <input> 中，添加一个 checkbox 类。最后，在 <label> 中添加一个 checkbox-label 类。更新的模板如下所示：

应用现在应该具有自定义的复选框，并且外观类似于下方的截图。

总结

目前，我们已经做完了示例程序的样式设计。在下一篇文章中，我们将为我们的应用程序添加一些更多的功能，即使用一个计算属性来为我们的应用程序添加一个已完成的 todo 项目的计数。

• 上一页
• 概述：JavaScript 客户端和函数库
• 下一页