剥茧抽丝 | 深入理解 Vue3 组件的 CSS 作用域

Vue3 组件化开发（4）——组件的 CSS 作用域问题

我们已经新建 02_组件的 css 作用域 文件夹，在该文件夹中新建 App.vue 文件，内容如下：

<template>
  <div id="app">
    <Header />
    <Main />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,
    Main,
    Footer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在该文件夹中新建 Header.vue 文件，内容如下：

<template>
  <div class="header">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      msg: 'Vue.js!'
    }
  }
}
</script>

<style>
.header {
  background-color: #28a745;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

在该文件夹中新建 Main.vue 文件，内容如下：

<template>
  <div class="main">
    <h2>{{ msg }}</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis vitae, eleifend sed nulla. Donec lectus nisl, aliquam vel est a, commodo pellentesque risus. Maecenas eget lacus eget nunc luctus rutrum. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>
</template>

<script>
export default {
  name: 'Main',
  data() {
    return {
      msg: '我是Main组件的内容'
    }
  }
}
</script>

<style>
.main {
  background-color: #f7f7f7;
  padding: 20px;
}
</style>

在该文件夹中新建 Footer.vue 文件，内容如下：

<template>
  <div class="footer">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      msg: 'Vue.js!'
    }
  }
}
</script>

<style>
.footer {
  background-color: #28a745;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

在 src 目录下新建 main.js 文件，内容如下：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

在 index.html 文件中添加如下代码：

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

<script src="main.js"></script>

然后运行 npm run serve 命令，即可看到效果。

以上就是 Vue3 组件化开发系列文章的第四篇，希望能对您有所帮助。欢迎关注我的公众号，获取更多精彩内容。