zhou
在開始 Vue 3 的實戰教學之前，我們需要先確認幾個基本概念以及安裝必要的環境。首先，請確保您的計算機上已經安裝了 Node.js 和 npm。如果尚未安裝，可以從 nodejs.org 下載並安裝最新版本。接下來，我們將逐步引導您建立一個基本的 Vue 3 應用程式。
Step 1: 創建新的 Vue 3 專案
使用 `npm` 或 `yarn` 在您的本地目錄中初始化一個新的 Vue 3 專案：
npx vite create vue
# or with Yarn
yarn create vue
這會啟動一個交互式的設定精靈，詢問您想要使用的模板選項。選擇「Manual」來手動配置您的專案。然後，選擇「Vue 3 (ESLint + Prettier)`作為基礎的腳手架。這個選項包含了 ESLint 和 Prettier 等有用的開發工具，它們能夠幫助您保持代碼的一致性和品質。
Step 2: 安裝依賴性
根據提示，輸入以下命令以安裝所有需要的相依性：
cd my-vue-app
pnpm install
Step 3: 啟動開發伺服器
一旦所有的相依性都已安裝完成，您可以通過執行以下命令來啟動 Vite 的開發伺服器：
vite
這將會在 http://localhost:3000/ 上啟動一個熱重載的開發伺服器。每次保存檔案時，頁面都會自動重新加載。
Step 4: 編寫第一個組件
打開 `src/components/HelloWorld.vue` 文件，這是 Vue CLI 為您預設生成的 Hello World 組件。讓我們稍微修改一下這個組件的內容：
<template>
<h1>Hello, {{ name }}!</h1>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('世界')
</script>
這裡我們使用了 `ref` 函數來自動追蹤變量 `name` 的值變化，並且在 `setup` 中聲明此函數。這樣可以使我們的組件更加高效且容易理解。
Step 5: 更新 App.vue
現在，我們需要在根組件 `App.vue` 中使用剛才創建的組件。打開 `src/App.vue` 文件，並進行以下修改：
<template>
<div id="app">
<!-- Add the component here -->
<HelloWorld />
<!-- Other content can go here too -->
</div>
</template>
<script setup lang="ts">
// No need for anything else in this file yet
</script>
這樣一來，當您瀏覽到 http://localhost:3000/ 時，應該能看到 “Hello, 世界!” 字樣出現在頁面上。
Step 6: 深入學習 Composition API
Vue 3 中的組合式 API 是其最強大的特性之一。它是用於組織和管理邏輯的一種方式，它允許您更好地控制組件的生命週期和方法。要了解更多關於組合式 API 的知識，建議閱讀官方文檔。
Step 7: 添加路由與狀態管理
隨著應用程序的不斷擴展，你可能會想要添加路由功能以便在不同頁面之間跳轉，或者考慮使用像 Pinia 這樣的狀態管理庫來處理多組件共享狀態的問題。這些都是進階的主題，但對於更複雜的應用來說是非常重要的。
以上就是一個簡短的 Vue 3 實戰教程。透過上述步驟，您應該能夠成功地創建一個基礎的 Vue 3 應用程式，並對 Vue 3 的基本結構有所瞭解。隨著經驗的積累，您可以繼續探索更多的 Vue 3 特性和最佳實踐。記得查看官方文檔和其他資源來加深您的理解。祝您 coding愉快！
