在 vue.js 中，app.vue 作为根组件，其模板内容最终被挂载到 html 的 `#app` 容器中；因此要样式化整个应用容器，需在 app.vue 中使用**非 scoped 的全局样式**，直接选择 `#app` 元素，而非组件名或自定义类名。
Vue.js 单文件组件（SFC）中的
- App 不是合法的 HTML 元素标签名，浏览器无法识别；
- .page__app 若未在 中显式添加该 class 到根级元素，自然不会生效；
- 更关键的是：App.vue 自身的模板片段（即 中的内容）并不会自动包裹在一个名为 app 的 DOM 元素内——它只是被 Vue 渲染后插入到外部真实的 容器中。
✅ 正确做法是：在 App.vue 中使用非 scoped 的 ：
⚠️ 注意事项：
- 不要试图用 :root、body 或 html 在 App.vue 中做全局重置——它们不属于组件作用域，且易受外部 CSS 干扰；推荐将基础重置（reset / normalize）和主题变量放在独立的 assets/styles/base.css 中，通过 main.js 导入；
- 若需为整个应用设置全局 CSS 变量（如主题色），可在 #app 下定义，例如：
#app { --primary-color: #42b883; --border-radius: 8px; }后续所有组件均可通过 var(--primary-color) 安全引用；
立即学习“前端免费学习笔记（深入）”；
- 避免滥用非 scoped 样式——除 #app 外，其他全局选择器（如 .button, h1）应谨慎使用，以防意外污染第三方组件或未来引入的 UI 库。
总结：App.vue 是应用的“门面”，也是全局样式的合理入口点。善用 #app + 非 scoped
