Vue 3中实现CSS作用域隔离主要有scoped和module两种方式：scoped通过添加data-v-xxxx属性实现元素级隔离，module则通过哈希化类名并导出模块对象实现类名级隔离，二者不可共存。
用 scoped 实现轻量级作用域隔离
这是最常用、上手最快的方式，适合绝大多数组件。
- 直接在
<style>标签上添加 scoped 属性（小写，不加引号、不加等号）：<style scoped> - Vue 编译时会自动为模板中的每个元素添加唯一 data 属性（如
data-v-xxxx），同时重写 CSS 选择器，使其只匹配带该属性的元素 - 支持预处理器，例如：
<style lang="scss" scoped>，只需确保已安装对应 loader（如sass） - 注意：scoped 默认不穿透子组件，若需修改第三方组件内部样式（如 Element Plus 的
.el-input__inner），要用:deep()深度选择器
用 module 实现更严格的类名隔离
CSS Modules 更侧重编译时类名哈希化，适合对样式隔离要求高、团队协作规范强的项目。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在
<style>标签上添加 module 属性：<style module>或<style lang="scss" module> - 必须显式声明
lang（如lang="scss"），否则构建工具可能无法识别为 CSS Modules，导致类名未哈希、样式仍全局生效 - 样式类名会被编译成唯一哈希值（如
button_abc123），并通过模块对象导出，需在 script 中引用：import styles from './xxx.module.css'（注意：Vue 3 SFC 中推荐用<style module>内联写法，配合defineProps/defineEmits的 setup 语法更简洁） - 不能和
scoped同时使用——二者机制冲突，只会生效其中一个
其他补充方式与注意事项
除上述两种核心方案外，还可结合工程实践增强隔离效果：
-
BEM 命名规范：即使不用 scoped 或 module，统一采用
.block__element--modifier类名风格，也能大幅降低命名冲突概率 -
多个 <style> 标签共存：一个组件内可同时存在
<style>（全局）、<style scoped>（当前组件）、<style module>（模块化类名），按需组合 -
避免混用陷阱：比如在
<style module>中写.btn:hover，实际使用时必须通过styles.btn绑定到元素，不能直接写 class="btn"
