https://vuejs.org/examples 開始練習看看Vue加深一點印象吧!
今天是要看 Hello World
還記得EP1的如何創建Vue專案嗎?
再來複習一下www
npm create vue@latest
依照上次學習,建置專案之後,打入指令就可以看到內建的網站!
現在開始探索資料夾內容摟~
當你選擇所有選項為 "no" 時,代表你沒有選擇 TypeScript、Vue Router、Vuex、測試框架等,這會創建一個最基本的 Vue 3 應用程式
。
開啟你的OS作業系統的檔案瀏覽器,
看到專案的資料夾內容有這些!
資料夾下有什麼差異?
首先要了解,OS系統檔案總管底下看到的資料夾
跟IDE下面看的資料夾內容會有差異!
主要原因就是,OS預設隱藏.gitignore,而IDE預設隱藏.gitignore設定的內容
不太懂這個的請研讀一下版本控管git的忽略清單
node_modules
資料夾(OS預設隱藏):
npm install
自動生成的。public
資料夾:
index.html
文件。這些資源不會被 webpack 進行打包,而是直接被複製到最終的輸出目錄。index.html
:應用程式的主 HTML 文件,包含一個 <div id="app"></div>
,Vue 應用程式會被掛載到這個元素中。src
資料夾:
main.js
:應用程式的入口文件。Vue 應用程式的初始化和設定大多數是在這裡完成的。App.vue
:根元件,定義了應用程式的基本結構和樣式。.gitignore
文件:
package.json
文件:
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畫面,開發的時候比較方便,存檔就看得到變化
終於要開始練習了!先移除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>
標籤中。不用依賴線上的工具摟~本地端也可以看到結果!
是不是實作過一次都會比較有感覺呢?
看文件真的是很悶啊~實作過還是要再複習一下文件~