一、系統安裝

二、文件結構

三、定義組件

<template>
  <div>
    <!-- 編寫html內容 -->
  </div>
</template>

<script>
  // 裡面編寫js內容

  // 下面定義組件defineComponent,vue3版本從vue裡面結構（基於es6）
  import {defineComponent} from 'vue'
  //每一個組件需要透過export default 導出 調用defineComponent,並傳入對象參數 ,其對象就是組件的配置對象
  export default defineComponent({
    name: 'Home' , //組件名稱
    //接收父組件的數據
    props:{

    },
    //定義子組件
    components:{

    },
    //return 對象 ,setup 接收兩個參數
    setup(props, ctx) {
      return {

      }
    }
  })

</script>

<style scoped lang= 'scss'>
/* 加上scoped 代表只有當前頁面css生效 ,如果設定檔勾選使用scss, 則lang= 'scss' */
</style>

四、將todolist拆分為四個組件

總共拆分一個父組件跟三個子組件

1.先定義一個父組件檔案home.vue,然後將子組件放到父組件的頁面來

2.於components資料夾下新增三個子資料夾,資料夾使用小駱駝峰命名規則,裡面檔名用大駱駝峰

每個組件檔都複製一份結構

結構