今天先介紹一下專案架構，認識一些資料夾與檔案負責的主要功能，及資料傳送的流程

• src/ : 程式的核心，幾乎所有的程式都寫在這裡，基本上我們會將程式碼目錄放在scr文件夾裡面，這其中包含

• App.vue : 根元件(Main component)，是整個程式的主體，基本上我們用來撰寫網頁的整體布局，網頁內容渲染都是由App.vue來控制，可容納並管理其他子元件，將不同子元件正確組織起來形成一個完整的網頁。

• main.js : 專案進入點(Enter point)，負責啟動並初始化Vue應用程式，將App.vue掛載到index.html中。負責載入必要的工具及插件。

createApp(App).mount('#app')

上列程式是指建立一個Vue應用程式，並將此應用程式的內容全部渲染到index.htm中ID為app的區塊中。

• components (元件) : 自行建立的的元件，例如導覽列元件，按鈕元件，產品卡片元件等等。每個元件都是獨立且可重複使用的，就像不同的積木，可將這些積木依照自身需求進行組裝。

• index.html : 應用程式主要的HTML檔案，會被瀏覽器直接載入的檔案。載入由Vite編譯和打包後的JavaScript程式碼來啟動Vue應用程式，動態建構和呈現所有內容。

main.js 啟動Vue -> App.vue 定義面主架構 -> index.html提供作為vue掛載點 ->瀏覽器顯示由Vue渲染的網頁畫面

• node_modules : 存放專案中所有第三方函示庫和套件及依賴的套件並自動管理，當我們執行npm install指令時，npm會讀取package.json檔案，找出dependencies(生產環境依賴)和devDependencies(開發環境依賴)中列出的所有套件並將他們下載到這個資料夾中。

• package.json : 專案的設定檔，其中紀錄了專案名稱，版本等基礎資訊專案所需的套件

  1. dependencies(生產環境依賴):應用程式運行時所需的套件
  2. devDependencies(開發環境依賴):開發、測試，編譯階段需要的套件
  3. package.json的scripts區塊定義一系列指令腳本，可快速執行指令。
     當我們 npm install指令時，package.json會確保所有套件都安裝正確的版本。
     package.json是所有套件和指令的綜覽，讓專案的依賴管理變的自動化、標準化。

• vite.config.js : vite的設定檔，專門用來調整Vite的各種行為，是專案自訂畫及最佳化的中心，可以調整各種設定，讓專案的開發過程更順暢、更高效。

希望這樣有讓大家稍微理解專案的結構

這裡稍微介紹一下我們重要的函式，ref()和reactive()
為了實現響應式網頁，Vue利用ref()和reactive()這兩項函式，來實現自動更新。

• ref : 處理單一值的嚮應式資料，例如number(數字)、string(字串)、boolean(布林值)等
  作法: 先用ref()來包裝值 ， 使用.value屬性來儲存或修改值

• reactive : 處理物件或陣列的響應式狀態，適用需要存放多個屬性或清單的狀況
  作法: 用reactive()來包裝物件，不需要使用.value

以下是程式範例

<script setup>
import { reactive, ref } from 'vue'

const message = ref('Hello vue!')
const counter = reactive({ count: 0 })

</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

<style.scoped>
</style>

<h1></h1>和<p></p> 是HTML的段落標籤，用來呈現文字。
import { reactive, ref } from 'vue' import ref和reactive函式
const message = ref('Hello vue!') 定義一個響應式變數message
const counter = reactive({ count: 0 }) 建立一個響應式物件counter
<h1>{{ message }}</h1> 利用插值語法，將{{ }}中的資料動態顯是在畫面上
<p>Count is: {{ counter.count }}</p> 一樣插植語法，counter是物件，.count 是counter屬性

好的今天就先介紹到這裡，各位明天見~