Vue 入門

Vue 是一款現代 JavaScript 框架，它提供了用於漸進增強（Progressive Enhancement）的有用工具——與許多其他框架不同，您可以使用 Vue 來增強現有的 HTML。這使您可以將 Vue 作為 jQuery 等庫的直接替代品。

也就是說，您也可以使用 Vue 來編寫完整的單頁面應用程式 (SPA)。這允許您建立完全由 Vue 管理的標記，在處理複雜的應用程式時，可以提高開發人員體驗和效能。當您需要時，它還允許您利用客戶端路由和狀態管理庫。此外，Vue 採取了一種“折中”的方式來處理客戶端路由和狀態管理等工具。雖然 Vue 核心團隊為這些功能維護了建議的庫，但它們並沒有直接捆綁到 Vue 中。這允許您選擇不同的路由/狀態管理庫，如果它們更適合您的應用程式。

除了允許您將 Vue 逐步整合到您的應用程式中之外，Vue 還提供了一種逐步編寫標記的方法。像大多數框架一樣，Vue 允許您透過元件建立可重用的標記塊。大多數情況下，Vue 元件使用特殊的 HTML 模板語法編寫。當您需要比 HTML 語法允許的更多控制時，您可以編寫 JSX 或純 JavaScript 函式來定義您的元件。

在完成本教程的過程中，您可能希望在其他選項卡中開啟 Vue 指南 和 API 文件，以便在需要有關任何子主題的更多資訊時可以參考它們。

要在現有站點中使用 Vue，您可以將以下 <script> 元素之一放到頁面上。這允許您開始在現有站點上使用 Vue，這就是 Vue 以漸進式框架而自豪的原因。當使用像 jQuery 這樣的庫遷移現有專案到 Vue 時，這是一個很好的選擇。使用此方法，您可以使用 Vue 的許多核心功能，例如屬性、自定義元件和資料管理。

• 開發指令碼（未最佳化，但包含控制檯警告，這對於開發非常有用。）
  html

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  

• 生產指令碼（最佳化版本，控制檯警告最少。建議您在網站上包含 Vue 時指定版本號，以便任何框架更新都不會在您不知情的情況下破壞您的即時網站。）
  html

  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  

但是，這種方法有一些限制。要構建更復雜的應用程式，您需要使用 Vue npm 包。這將允許您使用 Vue 的高階功能並使用 Vite 或 WebPack 等工具。為了使使用 Vue 構建應用程式更容易，有一個 CLI 腳手架工具 create-vue 用於簡化開發過程。要使用 create-vue，您需要

1. 安裝 Node.js 20。
2. npm 或 yarn。

要安裝 Vue 並初始化一個新專案，請在您的終端中執行以下命令

npm create vue@latest

或者，如果您更喜歡使用 yarn

yarn create vue@latest

此命令將為您提供一個您可以使用的專案配置列表。有一些預設值，但您可以選擇您自己的專案特定設定。這些選項允許您配置 TypeScript、程式碼風格檢查、vue-router、測試等內容。我們將在下面的初始化步驟中逐步介紹這些選項。

為了探索 Vue 的各種功能，我們將構建一個示例待辦事項列表應用程式。我們將首先使用 create-vue 為我們的應用程式構建一個新的腳手架。在終端中，cd 到您想要建立示例應用程式的位置，然後執行 npm create vue@latest（或者如果您更喜歡 Yarn，則執行 yarn create vue@latest）。

互動式工具允許您選擇一些選項，您可以透過按 Enter 鍵繼續。對於此專案，我們將使用以下配置

✔ Project name: … todo-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
? Add Prettier for code formatting? › Yes

選擇這些選項後，您的專案結構現在已配置，並且依賴項在 package.json 檔案中定義。接下來的步驟是安裝依賴項並啟動伺服器，該工具會方便地打印出您需要執行的命令

Scaffolding project in /path/to/todo-vue...

Done. Now run:

  cd todo-vue
  npm install
  npm run format
  npm run dev

如果一切順利，CLI 應該會為您的專案建立一系列檔案和目錄。最重要的檔案如下

• package.json：此檔案包含專案依賴項列表，以及一些元資料和 eslint 配置。
• yarn.lock：如果您選擇 yarn 作為您的包管理器，則將生成此檔案，其中包含專案所需的所有依賴項和子依賴項的列表。
• jsconfig.json：這是 Visual Studio Code 的配置檔案，併為 VS Code 提供專案結構的上下文，並協助自動完成。
• vite.config.js：這是 Vite 開發伺服器的配置檔案，該伺服器在本地機器上構建和服務您的專案。Vite 伺服器監視原始檔以進行更改，並在您進行更改時熱過載專案。
• public：此目錄包含在構建期間釋出的靜態資產。
  • favicon.ico：這是您的應用程式的 favicon。目前，它是 Vue 徽標。
• index.html：您的 Vue 應用程式從此 HTML 頁面執行。
• src：此目錄包含 Vue 應用程式的核心。
  • main.js：這是應用程式的入口點。目前，此檔案初始化您的 Vue 應用程式，並指示您的應用程式應附加到 index.html 檔案中的哪個 HTML 元素。此檔案通常是您註冊全域性元件或其他 Vue 庫的地方。
  • App.vue：這是 Vue 應用程式中的頂級元件。有關 Vue 元件的更多解釋，請參見下文。
  • components：此目錄用於儲存您的元件。目前，它只有一個示例元件。
  • assets：此目錄用於儲存靜態資產，如 CSS 和影像。由於這些檔案位於源目錄中，因此可以由 Webpack 處理。這意味著您可以使用 Sass/SCSS 或 Stylus 等預處理器。

就像在許多前端框架中一樣，元件是使用 Vue 構建應用程式的核心部分。這些元件允許您將大型應用程式分解成離散的構建塊，這些構建塊可以分別建立和管理，並在需要時相互之間傳遞資料。這些小塊可以幫助您推理和測試程式碼。

雖然一些框架鼓勵您將模板、邏輯和樣式程式碼分離到單獨的檔案中，但 Vue 採取了相反的方法。使用 單檔案元件 (SFC)，Vue 允許您將模板、相應的指令碼和 CSS 全部組合到一個以 .vue 結尾的檔案中。這些檔案由 JS 構建工具（如 Vite 或 Webpack）處理，這意味著您可以在專案中利用構建時工具。這允許您使用 Babel、TypeScript、SCSS 等工具來建立更復雜的元件。

讓我們檢視使用 CLI 建立的專案中的 src 資料夾，並檢查您的第一個 .vue 檔案：App.vue。

開啟您的 App.vue 檔案——您會看到它有三個部分：<template>、<script> 和 <style>，它們包含元件的模板、指令碼和樣式資訊。所有單檔案元件都共享相同的基本結構。

<template> 包含元件的所有標記結構和顯示邏輯。您的模板可以包含任何有效的 HTML，以及我們將在後面介紹的一些 Vue 特定語法。

<script> 包含元件的所有非顯示邏輯。最重要的是，您的 <script> 標記是您在本地註冊元件、定義元件輸入（props）、處理本地狀態、定義方法等等的地方。您的構建步驟將處理此物件並將其（與您的模板）轉換為具有 render() 函式的 Vue 元件。

在 App.vue 的情況下，透過匯入的方式註冊了兩個元件 TheWelcome 和 HelloWorld。當您以這種方式註冊元件時，您是在本地註冊它。本地註冊的元件只能在註冊它們的元件內部使用，因此您需要在每個使用它們的元件檔案中匯入並註冊它們。這對於 Tree shaking（不載入未使用的程式碼）和捆綁拆分（僅在需要時載入程式碼）很有用，因為並非應用程式中的每個頁面都一定需要每個元件。

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
</script>

<style> 是您為元件編寫 CSS 的地方。如果您新增 scoped 屬性——<style scoped>——Vue 將樣式範圍限定到 SFC 的內容。這與 CSS-in-JS 解決方案類似，但允許您只編寫純 CSS。

create-vue 工具內建了 Vite 作為開發伺服器。這允許你在本地執行你的應用，以便輕鬆測試，而無需從頭配置伺服器。CLI 將命令作為 npm 指令碼新增到專案的 package.json 檔案中，以便你可以輕鬆執行它們。

在你的終端中，嘗試執行 npm run dev（或者如果你更喜歡 yarn，則執行 yarn dev）。你的終端應該輸出類似以下內容

  VITE v5.0.11  ready in 312 ms

  ➜  Local:   https://:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

如果你在新的瀏覽器標籤頁中導航到“localhost”地址，你應該會看到你的應用（此地址應為 https://:5173/，如上所述，但可能因你的設定而異）。現在，應用應該包含歡迎訊息、指向 Vue 文件的連結、你在使用 CLI 初始化應用時新增的外掛的連結，以及一些指向 Vue 社群和生態系統的其他有用連結。

讓我們對應用進行第一次更改——我們將刪除 Vue 徽標。開啟 App.vue 檔案，並從模板部分刪除 <img> 元素

<img
  alt="Vue logo"
  class="logo"
  src="./assets/logo.svg"
  width="125"
  height="125" />

如果你的伺服器仍在執行，你應該會立即看到徽標從渲染的站點中移除。我們也從模板中移除 HelloWorld 元件。

首先刪除這一行

<HelloWorld msg="You did it!" />

如果你現在儲存你的 App.vue 檔案，你的編輯器可能會顯示錯誤，因為我們已註冊了 HelloWorld 元件但沒有使用它。我們還需要從 <script> 元素內部移除匯入和註冊元件的行

現在刪除這些行

import HelloWorld from "./components/HelloWorld.vue";

如果你刪除 <template> 標籤內的所有內容，你將在編輯器中看到一條錯誤訊息，提示 模板需要子元素。你可以透過在 <template> 標籤內新增一些內容來解決此問題，我們可以從 <div> 內部的新的 <h1> 元素開始。因為我們將在下面建立一個待辦事項列表應用，所以讓我們將標題設定為“待辦事項列表”，如下所示

<template>
  <div id="app">
    <h1>To-Do List</h1>
  </div>
</template>

App.vue 現在將顯示我們的標題，正如你所期望的那樣。

讓我們暫時保留在這裡。我們瞭解了 Vue 背後的一些概念，為我們的示例應用建立了一些腳手架以在其內部執行，檢查了它並進行了一些初步更改。

在基本介紹之後，我們將更進一步，構建我們的示例應用，一個基本的待辦事項列表應用，它允許我們儲存專案列表，在完成時將它們勾選，並按所有、已完成和未完成的任務過濾列表。

在下一篇文章中，我們將構建我們的第一個自定義元件，並瞭解一些重要的概念，例如向其中傳遞道具和儲存其資料狀態。

• 上一個
• 概述：理解客戶端 JavaScript 框架
• 下一個