EP15 - ex1. Hello World

https://vuejs.org/examples 開始練習看看Vue加深一點印象吧！
今天是要看 Hello World
還記得EP1的如何創建Vue專案嗎？
再來複習一下www

npm create vue@latest

依照上次學習，建置專案之後，打入指令就可以看到內建的網站！
現在開始探索資料夾內容摟～

當你選擇所有選項為 "no" 時，代表你沒有選擇 TypeScript、Vue Router、Vuex、測試框架等，這會創建一個最基本的 Vue 3 應用程式。

研究資料夾

作業系統下的資料夾

開啟你的OS作業系統的檔案瀏覽器，
看到專案的資料夾內容有這些！

IDE底下的資料夾

資料夾下有什麼差異？

首先要了解，OS系統檔案總管底下看到的資料夾
跟IDE下面看的資料夾內容會有差異！
主要原因就是，OS預設隱藏.gitignore，而IDE預設隱藏.gitignore設定的內容
不太懂這個的請研讀一下版本控管git的忽略清單

資料夾底下有什麼毛？

node_modules 資料夾（OS預設隱藏）：

• 這個資料夾包含了所有應用程式所需的 Node.js 模組和其相依的庫。這個資料夾是由 npm install 自動生成的。

public 資料夾：

• 這個資料夾包含靜態資源，比如 index.html 文件。這些資源不會被 webpack 進行打包，而是直接被複製到最終的輸出目錄。
• index.html：應用程式的主 HTML 文件，包含一個 <div id="app"></div>，Vue 應用程式會被掛載到這個元素中。

src 資料夾：

• 這是應用程式的主要程式碼所在的地方。
• main.js：應用程式的入口文件。Vue 應用程式的初始化和設定大多數是在這裡完成的。
• App.vue：根元件，定義了應用程式的基本結構和樣式。

.gitignore 文件：

• 這個文件告訴 Git 哪些檔案或資料夾應該被忽略，不應該被提交到版本控制系統中。

package.json 文件：

• 這個文件包含了應用程式的元數據，比如名稱、版本、相依的庫和腳本等。它是 npm 和 yarn 使用的主要配置文件。

package-lock.json 文件：

• 這個文件用來鎖定相依項的版本，確保每次安裝的相依項版本一致。當你或其他人運行 npm install 時，會根據這個文件安裝確切的版本。

哪裏開始寫程式？

介紹這麽多檔案跟資料夾了～知道在哪裡開始寫了嗎？
有好奇心的你一定每個檔案資料夾都開來看過了吧
一定有些看得懂有些看不懂～但最終要知道彼此的關係～

index.html ⮕ main.js ⮕ App.vue

terminal 下面輸入npm run dev之後可以看到網址

在vscode下，按Shift + command + P，輸入 simple browser: show，把網址local網址輸入，就可以在vscode旁邊看到即時修改code的preview畫面，開發的時候比較方便，存檔就看得到變化

範例1：Hello World

終於要開始練習了！先移除App.vue裡頭的內容

瀏覽器就會馬上出現錯誤

App.vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

• <script setup>: 這是一個 Vue 3 特有的語法糖，用來簡化組件的定義。與傳統的 <script> 標籤不同，<script setup> 可以讓你直接在其內部撰寫組件的邏輯，而不需要明確地定義 setup 函數。
• import { ref } from 'vue': 從 Vue 引入 ref 函數。ref 函數用來創建響應式的變數。
• const message = ref('Hello World!'): 使用 ref 函數創建了一個響應式變數 message，初始值為 'Hello World!'。這意味著當 message 的值改變時，與之綁定的模板部分也會自動更新。
• <template>: 定義了組件的模板（HTML 結構）。
• <h1>{{ message }}</h1>: 使用雙大括號 {{ }} 綁定一個 Vue 的響應式變數 message。這個變數的值將顯示在 <h1> 標籤中。

不用依賴線上的工具摟～本地端也可以看到結果！
是不是實作過一次都會比較有感覺呢？
看文件真的是很悶啊～實作過還是要再複習一下文件～