如何让vue3的样式都是只影响当前页面的

要让Vue 3的样式只影响当前页面，可以使用以下方法：

1. 使用局部样式作用域：在Vue组件的<style>标签中添加scoped属性，这样样式只会应用于当前组件及其子组件，不会影响其他组件。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style scoped>
.my-component {
  /* 组件样式 */
}
</style>

2. 使用唯一的类名或ID：给每个组件的根元素添加唯一的类名或ID，并在样式中使用该类名或ID来限定样式的作用范围。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style>
.my-component {
  /* 组件样式 */
}
</style>

3. 使用CSS模块化：使用CSS模块化可以确保每个组件的样式只在当前组件中生效。在Vue组件中，可以通过<style module>标签来启用CSS模块化。

<template>
  <div :class="$style.myComponent">
    <!-- 组件内容 -->
  </div>
</template>

<style module>
.myComponent {
  /* 组件样式 */
}
</style>

使用这些方法可以确保Vue 3中的样式只影响当前页面，而不会影响其他页面或组件