Vue项目中CSS Modules和Scoped CSS的介绍与区别

Vue项目中CSS Modules和Scoped CSS都是为了解决CSS命名冲突的问题，但是它们的实现方式不同。

CSS Modules是一种将CSS文件作为模块导入到JavaScript中的方案，通过导入的方式，每个CSS文件都有自己的作用域，避免了命名冲突。当我们使用CSS Modules时，我们需要在Vue组件中使用<style module>来指定该样式文件是一个模块，并使用:class="$style.xxx"来指定样式的类名称。例如，一个Vue组件中使用CSS Modules的示例：

<template>
  <div class="container">
    <p class="text">{{ message }}</p>
  </div>
</template>

<script>
import styles from './styles.module.css';

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  style: [styles]
}
</script>

<style module>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  color: blue;
}
</style>

在上述示例中，我们通过import styles from './styles.module.css'导入了样式文件，并使用<style module>来声明该样式文件是一个模块。在模板部分，我们使用class="$style.xxx"来指定使用该模块中的样式。

Scoped CSS是一种通过在CSS中添加特殊标记来标识每个组件的样式作用域的方案。我们可以在样式规则中使用:scope伪类选择器来表示当前组件的根元素。例如，一个使用Scoped CSS的Vue组件示例：

<template>
  <div class="container">
    <p class="text">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container p.text {
  color: blue;
}
</style>

在上述示例中，我们可以看到在<style scoped>中声明的样式规则会自动加上一个特殊的选择器，使得该样式只在当前组件的根元素下生效。

当我们在Vue项目中使用CSS Modules时，可以通过命名空间来使用其它模块中的样式，而在使用Scoped CSS时，我们需要确保样式规则唯一，避免冲突。

总的来说，CSS Modules和Scoped CSS都是解决Vue项目中CSS命名冲突的有效方案，可以根据实际情况来选择不同的使用方案。