10、Vue项目高级设置与支持中心应用搭建

Vue项目高级设置与支持中心应用搭建

组件样式与预处理器

在Vue项目中，组件样式的设置是一项重要的工作。我们可以为组件应用基本的CSS规则，例如为 .movies 类添加样式：

<style>
.movies {
  list-style: none;
  padding: 12px;
  background: rgba(0, 0, 0, .1);
  border-radius: 3px;
}
</style>

为了避免样式冲突，我们可以使用 scoped 属性将 <style> 标签内的CSS作用域限定在当前组件。例如：

<style scoped>
.movie:not(:last-child) {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: solid 1px rgba(0, 0, 0, .1);
}
</style>

使用 scoped 属性后，PostCSS会为模板元素和CSS选择器添加一个唯一的属性，确保样式只应用于当前组件。例如：

<template>
  <h1 class="title">Hello</h1