Vue 入門

更清晰的 Vue

Vue 是一個現代 JavaScript 框架，為漸進式增強提供了有用的功能——與許多其他框架不同，你可以使用 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、linting、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 中構建應用程式的核心部分。這些元件允許你將大型應用程式分解為離散的構建塊，這些構建塊可以單獨建立和管理，並根據需要相互傳輸資料。這些小塊可以幫助你推理和測試程式碼。

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

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

App.vue

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

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

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

在 App.vue 的例子中，兩個元件 TheWelcome 和 HelloWorld 透過匯入方式註冊。當你以這種方式註冊元件時，你是在本地註冊它。本地註冊的元件只能在註冊它們的元件內部使用，因此你需要在每個使用它們的元件檔案中匯入並註冊它們。這對於搖樹最佳化（不載入未使用的程式碼）和捆綁包拆分（僅在需要時載入程式碼）非常有用，因為你的應用程式中的每個頁面不一定需要每個元件。

<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> 標籤內的所有內容，你的編輯器中會顯示錯誤訊息 The template requires child element。你可以透過在 <template> 標籤內新增一些內容來修復此問題，我們可以從 <div> 內的一個新的 <h1> 元素開始。由於我們將在下面建立一個待辦事項列表應用程式，所以我們將標題設定為“To-Do List”，如下所示：

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

現在，App.vue 將按預期顯示我們的標題。

總結

讓我們暫時停在這裡。我們已經瞭解了 Vue 背後的一些概念，為我們的示例應用程式建立了一些腳手架，檢查了它，並進行了一些初步更改。

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

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

• 概述：JavaScript 框架和庫
• 下一頁