App.vue文件

以.vue为后缀的文件，成为SFC(单文件组件[一个文件就是一个组件])

• SFC 【Single File Component】构成[？表示可有可无]
  • template
    • jsx
  • script？
  • style？ ```vue

style 有两个属性 `lang` 表示选择那种css语言`scoped` 组件局部样式<br />有scoped  表示组件局部样式【只在当前组件生效果】<br />无scoped 表示全局样式【】
> 总结：App组件中不加scoped属性 其他组件必须加scoped属性
- 父子组件嵌套(引入其他组件)书写 及 css样式文件引入
案例：将Tab1和Tab2组件引入App组件中，让他们形成父子组件结构<br />在父组件的script标签中使用 `import` 组件名 `from` '组件路径'导入子组件，最后通过 `components` 选项局部注册该子组件
```vue
<template>
  <div>
    <Tab1/> // 使用
    <Tab2/>
    <span>我是App.vue文件</span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Tab1 from './components/Tab.vue' // 引入Tab子组件
import Tab2 from './components/Tab2.vue'; // 引入Tab2子组件
export default defineComponent({ 
  components:{ // 通过components选项注册子组件
    Tab,Tab2
  }
})
</script>
<style lang="stylus" scoped>
  // 引入取消标签默认样式css文件 是全局样式 需要加scoped属性
  @import url('/assets/style/reset.styl');// stylus样式文件的后缀名是 .styl
  span#span
    background:red
</style>