50 docs tagged with "Vue3"

1 Vite 與 Vue3 的關係

在 vite+vue3 專案中的資料夾結構差不多會和下面的內容一樣，不至於差太多

理解 專案啟動流程 能幫你更快上手 Vue3 專案維護。這章節會說明 main.js 與 App.vue 的職責、常見寫法與最佳實務。

在 Vue3 專案中，檔案常被放在 components/ 或 views/ 資料夾。

Vue 的強大之處在於 元件化 (Component)。

在 Vue 中，元件 (Component) 是應用的最小組成單位。

在 Vue 中，Props (Properties) 是父元件用來傳遞資料給子元件的機制。

在 Vue 中，Emit 是子元件向父元件傳遞事件的方式。

在 Vue 中，父子元件透過 Props 與 Emit 建立「單向資料流」：

在 Vue 中，插槽 (Slot) 提供一種方式，讓父元件可以把「內容」傳遞到子元件中，而不只是單純傳遞資料。

Vue Router 是 Vue 官方提供的 路由解決方案，用來管理頁面與網址的對應關係。

Vue Router 提供了兩個核心組件：

在實際應用中，頁面通常需要根據「不同參數」來顯示不同內容，例如：

在 Vue Router 中，巢狀路由 (Nested Routes) 可以讓我們建立「多層次的頁面結構」。

1. 基本概念

在 Vue Router 中，導航守衛 (Navigation Guards) 可以讓我們在路由跳轉時，控制是否允許進入或離開某個頁面，或在切換前後執行一些邏輯。

在 Vue3 專案中，最常用來處理 API 請求的工具就是 Axios。

隨著專案規模增大，如果每個組件都直接寫 axios.get(...)，會造成程式碼重複、難以維護。

在 Vue3 + Axios 的開發中，建議搭配 async/await 來處理非同步請求。

async/await 中 function 宣告 與 箭頭函式 兩種寫法的比較

在專案中，攔截器 (Interceptors) 是 Axios 的強大功能之一。

在 Vue3 + Axios 的開發中，非同步請求的四個基本狀態是：loading、data、error、empty。

1. 為什麼要用 Pinia？

在 Pinia 中，Store 就是「集中管理狀態的容器」。

在 Pinia 的 Setup Store 中：

定義好 Store 之後，下一步就是在 Vue 組件中使用。

學會了 Pinia 的基本使用後，可以進一步掌握一些進階技巧，讓專案更容易維護與擴充。

Pinia 不是直接取代 props/emit，而是減少你需要用 props/emit 的情況。

`` 可以讓 該元件的樣式只作用在該元件內，避免影響到其他元件，提升維護性。

雖然 `` 能讓樣式只在元件內生效，但實務上仍需要一些「全域樣式」，

在 Vite 專案中，環境變數（Environment Variables） 用來根據不同環境（例如開發、測試、正式）

在開發 Vue3 + Vite 專案時，我們常會面臨不同環境下的需求差異，

當你的 Vue3 + Vite 專案開發完成後，最後一步就是 打包 (Build) 與 部署 (Deploy)。

在使用 gh-pages 將 dist 資料夾部署到 GitHub 的 gh-pages 分支之前，我們必須先在 vite.config.js 中調整 base 路徑。

Vue 3 的最大特色就是引入了 Composition API，這是一個全新的程式撰寫方式，相較於 Vue 2 的 Options API 有著顯著的優勢。

在 Vue3 中，當一個值需要 依賴其他響應式變數 來計算時，可以使用 computed。

onMounted 是 Vue3 中最常用的生命週期 Hook 之一。

onUnmounted 是 Vue3 的生命週期 Hook。

onUpdated 是 Vue3 的生命週期 Hook 之一。

在 Vue3 Composition API 中，最常用的就是 響應式資料。

setup() 是 Vue3 Composition API 的核心入口點。

Vue 提供了直觀的 模板語法 (Template Syntax)，讓你可以在 HTML 中直接綁定資料、控制顯示邏輯。

在 Vue3 中，當你需要 監聽資料變化並執行副作用（side effect，例如 console.log、呼叫 API），可以使用 watch 或 watchEffect。

在 Vue 模板中，可以使用 v-on（或縮寫 @）來監聽 DOM 事件，並執行對應的方法。

除了常見的 v-if、v-for、v-model 等指令外，Vue 還有一些不太常見但實用的指令。

在 Vue 模板中，最基本的功能就是將 資料顯示在畫面上，這可以透過「插值」與「綁定」來完成。

在 Vue 模板中，可以使用條件判斷指令來控制元素是否顯示。

Vue 元件在建立、渲染、更新、銷毀的過程中，會觸發一系列的 生命週期函式 (Lifecycle Hooks)。

在 Vue 中，可以使用 v-for 指令來迭代陣列或物件，動態產生多個元素。

在 Vue 中，v-model 用來建立 表單元素與資料之間的雙向綁定。