1.组件组成

一个.vue文件是一个单文件组件（SFC）。

<template>
    <div class="container">{{ message }}</div>
    </template>
    <script>
    
    export default{
      data(){
        return{
          message:"组件的组成"
        }
      }
    
    
    }
    
    </script>
    
    <style scoped>
    .container{
      color: red;
      font-size: 30px;
    }
    </style>    

组件使用

<template>
  <!-- 3.显示组件 -->
  <MyComponet/>
</template>

//1.引入组件
import ./components/MyComponet.vue
<script>
import MyComponet from './components/MyComponet.vue';

export default{
  components:{
    //2.注册组件
    MyComponet

  }
}
</script>

<style scoped></style>

2.