Vue3进行样式Scoped和Global的设置方法

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3!</h1>
    <p class="description">这是一段示例文本，用于演示 scoped 样式的作用。</p>
  </div>
</template>

<script>
export default {
  name: 'ScopedExample'
}
</script>

<style scoped>
.container {
  border: 1px solid #ccc;
  padding: 20px;
}
.title {
  color: blue;
}
.description {
  color: green;
}
</style>

<template>
  <div id="app">
    <ScopedExample />
  </div>
</template>

<script>
import ScopedExample from './components/ScopedExample.vue';

export default {
  name: 'App',
  components: {
    ScopedExample
  }
}
</script>

<style>
/* Global Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 2rem;
}
</style>

<template>
  <div class="global-component">
    <h2 class="global-title">全局样式</h2>
    <p class="description">这是一个拥有全局样式的组件，同时我们也有 Scoped 样式。</p>
    <button class="button">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'GlobalAndScopedExample'
}
</script>

<style scoped>
.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border: none;
}
</style>

<style>
.global-component {
  border: 1px solid #333;
  padding: 20px;
}

.global-title {
  color: orange;
}
</style>