如何在Vue3中设置全局样式？

在Vue3中，如果你想设置全局样式，可以采用以下几种方法：

1. **App.vue文件**：如果你希望在整个应用中生效，可以在`App.vue`组件的`<style>`标签中添加样式。例如：

<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<style scoped>
/* 全局样式 */
body {
  background-color: #f0f0f0;
}

.header {
  /* ... */
}
</style>

这里`scoped`属性用于限制样式仅作用于当前组件，如果不加则会默认为全局样式。

2. **CSS模块**：使用CSS Modules可以让每个组件都有它自己的样式空间，如果需要共享某些样式，可以导入并使用`@global`规则：

// global.css
@import '~某些全局模块.css';

body {
  font-family: 'Roboto', sans-serif;
}

/* 或者在某个组件的样式中 */
.myComponent {
  @global {
    color: red;
  }
}

3. **Vue.extend的选项**：对于更复杂的全局样式，可以创建一个全局CSS插件，通过Vue.extend的options对象传递给应用实例：

import Vue from 'vue';
import App from './App.vue';
import MyGlobalStyles from './styles/global.css';

const app = new Vue({
  // ...
  setup() {
    return { app };
  },
  globalProperties: {
    styles: `
      /* 这里是你的全局样式 */
      ${MyGlobalStyles}
    `,
  },
})(App);

app.$mount('#app');