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

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

1. 组件样式与作用域样式

在Vue项目中，我们可以为组件应用CSS规则。例如，为 .movies 类应用一些样式：

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

我们还可以使用 scoped 属性将 <style> 标签内的CSS样式作用域限定在当前组件。这样，这些CSS样式只会应用到该组件模板中的元素。例如：

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

这是通过PostCSS（一个处理工具）为模板和CSS添加特殊属性来实现的。例如，以下是一个作用域样式组件：

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