從零基礎到最佳實踐：Vue.js 系列（1/10）：《環境搭建與基礎概念》

Vue.js 環境搭建與基礎概念

關鍵點
- Vue.js 是一個簡單易用的前端框架，適合初學者快速上手。
- 搭建開發環境需要安裝 Node.js 和 npm/Yarn，推薦使用最新 LTS 版本。
- Vue CLI 是官方工具，可快速創建項目并提供開發服務器。
- Vue.js 基于 MVVM 模式，響應式系統是其核心特性，驅動數據與視圖的自動同步。

為什么需要環境搭建？

要開發 Vue.js 應用，首先需要一個前端開發環境，包括 Node.js（運行 JavaScript 的環境）和 npm 或 Yarn（管理依賴的工具）。Vue CLI 幫助快速生成項目結構，省去手動配置的麻煩。

核心概念簡介

Vue.js 采用 MVVM（Model-View-ViewModel）模式，數據（Model）通過 ViewModel 與視圖（View）綁定。響應式系統讓數據變化自動更新界面，無需手動操作 DOM。

接下來做什么？

本文將引導你安裝必要工具、創建第一個 Vue 項目，并理解 Vue.js 的核心概念，為后續學習打下基礎。

從零基礎到最佳實踐：Vue.js 系列（1/10）：《環境搭建與基礎概念》

歡迎踏上 Vue.js 的學習之旅！Vue.js 是一個輕量、靈活且強大的前端框架，以其簡單易學和高效開發而聞名。本系列專欄共 10 篇，從零基礎到進階技巧，再到項目實戰，帶你全面掌握 Vue.js。本文是第一篇，聚焦于環境搭建和基礎概念，為你開啟 Vue.js 開發之門。我們將以輕松、易懂的語言，結合代碼示例，詳細講解如何準備開發環境、創建項目，并理解 Vue.js 的核心機制。

1. 前端開發環境搭建

在開始 Vue.js 開發之前，我們需要搭建一個前端開發環境，包括安裝 Node.js 和包管理工具（npm 或 Yarn）。這些工具是現代前端開發的基石，幫助我們運行 JavaScript 代碼和管理項目依賴。

1.1 安裝 Node.js

Node.js 是一個 JavaScript 運行時環境，允許在瀏覽器之外運行 JavaScript 代碼。它是 Vue.js 開發的基礎，因為許多工具（如 Vue CLI）依賴 Node.js。

步驟：
1. 訪問 Node.js 官網，下載最新 LTS（長期支持）版本（截至 2025 年 5 月，推薦版本為 20.11.0 或更高）。
2. 按照安裝向導完成安裝，支持 Windows、macOS 和 Linux。
3. 打開終端（Windows 使用命令提示符或 PowerShell，macOS/Linux 使用終端），運行以下命令驗證安裝：
```
node -v
```
  如果返回版本號（如 v20.11.0），說明安裝成功。
注意：選擇 LTS 版本以確保穩定性和兼容性。如果您需要管理多個 Node.js 版本，可以使用 nvm（Node Version Manager）。

1.2 安裝包管理工具（npm 或 Yarn）

Node.js 自帶 npm（Node Package Manager），用于安裝和管理項目依賴。Yarn 是另一種流行的包管理工具，以速度快和一致性強著稱。

npm：無需額外安裝，隨 Node.js 提供。驗證版本：
```
npm -v
```
Yarn（可選）：如果您更喜歡 Yarn，可以通過 npm 全局安裝：
```
npm install -g yarn
```
驗證安裝：
```
yarn -v
```
npm vs Yarn：npm 是默認選擇，易于上手；Yarn 提供更快的安裝速度和離線緩存功能。兩者功能類似，選擇任一即可。

1.3 使用 nvm 管理 Node.js 版本（可選）

如果您在不同項目中需要使用不同版本的 Node.js，nvm 是一個方便的工具，可以輕松切換版本。

安裝 nvm：

macOS/Linux：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Windows：下載并安裝 nvm-windows。

使用 nvm：
- 安裝特定版本：
```
nvm install 20.11.0
```
- 切換版本：
```
nvm use 20.11.0
```
- 查看已安裝版本：
```
nvm list
```

2. Vue CLI 安裝與項目初始化

Vue CLI 是 Vue.js 官方的命令行工具，用于快速創建和管理 Vue 項目。它提供預配置的項目結構、開發服務器和構建工具，極大簡化開發流程。

2.1 安裝 Vue CLI

確保 Node.js 和 npm 已安裝，然后運行以下命令全局安裝 Vue CLI：

npm install -g @vue/cli

驗證安裝：
```
vue --version
```
如果返回版本號（如 @vue/cli@5.0.8），說明安裝成功。
注意：Vue CLI 4.x 和 5.x 要求 Node.js 版本 8.9 或更高，推薦使用 10.x 或以上。如果您需要 Vue CLI 2.x 的舊功能，可以安裝橋接工具：
```
npm install -g @vue/cli-init
```

2.2 創建新項目

使用以下命令創建一個新 Vue 項目：

vue create my-project

配置選項：運行后，Vue CLI 會提示您選擇項目配置：
- 默認預設：包含基本配置，適合快速開始。
- 手動選擇功能：允許選擇 Vue 版本（2 或 3）、路由（Vue Router）、狀態管理（Pinia 或 Vuex）、CSS 預處理器（如 Sass）、代碼檢查（ESLint）等。
快速創建：若不想手動配置，可使用默認配置：
```
vue create my-project --default
```
圖形界面（可選）：Vue CLI 提供圖形界面，運行以下命令：
```
vue ui
```
這會打開瀏覽器，顯示一個可視化界面，引導您完成項目創建。

2.3 啟動開發服務器

創建項目后，進入項目目錄：

cd my-project

安裝依賴：

npm install

啟動開發服務器：

npm run serve

訪問項目：瀏覽器會自動打開（通常為 http://localhost:5173），顯示 Vue.js 的歡迎頁面。
項目結構：新建的項目包含以下關鍵文件：
- src/main.js：項目入口文件。
- src/App.vue：根組件。
- src/components/：存放子組件。
- package.json：項目依賴和腳本配置。

Vue 項目結構示例

以下是 vue create 生成的典型項目結構：

my-project/
├── node_modules/        # 項目依賴
├── public/             # 靜態資源
│   ├── index.html      # 主 HTML 文件
│   └── favicon.ico
├── src/                # 源代碼
│   ├── assets/         # 靜態資源（如圖片、CSS）
│   ├── components/     # Vue 組件
│   ├── App.vue         # 根組件
│   └── main.js         # 入口文件
├── package.json        # 項目配置和依賴
└── README.md           # 項目說明

3. Vue.js 核心概念：MVVM 與響應式原理

Vue.js 的設計基于 MVVM（Model-View-ViewModel）模式，并以其強大的響應式系統為核心，實現了數據與視圖的自動同步。

3.1 MVVM 模式

MVVM 是一種軟件架構模式，將應用程序分為三個部分：

Model：數據模型，包含業務邏輯和數據（如用戶信息、商品列表）。
View：用戶界面，顯示給用戶（如 HTML 模板）。
ViewModel：連接 Model 和 View，處理數據綁定和用戶交互。

在 Vue.js 中，組件的 data 或 setup 函數充當 ViewModel，管理響應式數據。例如：

<template><div><h1>{{ message }}</h1><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Welcome to Vue.js!';}}
}
</script>

在這個例子中，data 中的 message 是 ViewModel 的一部分，與模板中的 {{ message }} 綁定。當 message 變化時，視圖自動更新。

3.2 響應式原理

Vue.js 的響應式系統是其核心特性，確保數據變化自動觸發視圖更新。其工作原理基于依賴追蹤和發布-訂閱模式：

依賴追蹤：當組件渲染時，Vue.js 記錄模板中使用的響應式數據。
發布-訂閱：當這些數據變化時，Vue.js 通知依賴它們的組件重新渲染。

在 Vue 3 中，響應式系統通過以下 API 實現：

ref：用于單個值的響應式引用。
reactive：用于創建響應式對象或數組。

示例：

<template><div><p>計數: {{ count }}</p><p>狀態: {{ state.message }}</p><button @click="increment">增加</button></div>
</template><script setup>
import { ref, reactive } from 'vue';const count = ref(0);
const state = reactive({ message: 'Hello, Vue!' });function increment() {count.value++;state.message = `Count is now ${count.value}`;
}
</script>

ref：count 是一個響應式引用，訪問或修改時使用 .value。
reactive：state 是一個響應式對象，屬性變化會觸發視圖更新。

3.3 計算屬性與偵聽器

計算屬性：基于其他響應式數據計算值，依賴變化時自動更新。
偵聽器：在數據變化時執行自定義邏輯。

示例：

<template><div><p>價格: {{ price }}</p><p>折扣價: {{ discountedPrice }}</p><button @click="price += 10">增加價格</button></div>
</template><script setup>
import { ref, computed, watch } from 'vue';const price = ref(100);
const discount = ref(0.1);const discountedPrice = computed(() => price.value * (1 - discount.value));watch(price, (newPrice) => {console.log(`價格變為: ${newPrice}`);
});
</script>

計算屬性：discountedPrice 基于 price 和 discount 計算。
偵聽器：watch 監聽 price 變化，記錄日志。

4. 實際應用場景

環境搭建：Node.js 和 npm/Yarn 是前端開發的標配，Vue CLI 簡化了項目初始化，適合快速原型開發。
MVVM 模式：在表單、列表等場景中，MVVM 模式讓數據與視圖分離，提高代碼可維護性。
響應式系統：用于動態更新界面，如實時顯示用戶輸入、計算價格或更新狀態。

5. 最佳實踐

實踐	描述
使用 LTS 版本	選擇 Node.js LTS 版本以確保穩定性和兼容性。
選擇合適的包管理器	npm 適合簡單項目，Yarn 適合需要高性能或離線緩存的場景。
利用 Vue CLI 圖形界面	使用 `vue ui` 簡化項目配置，適合初學者。
理解響應式數據	使用 `ref` 和 `reactive` 管理數據，確保視圖與數據同步。

6. 2025 年趨勢

截至 2025 年 5 月，Vue.js 3 是主流版本，推薦使用 Vite 替代 Vue CLI，因為 Vite 提供更快的構建速度和現代化開發體驗。然而，Vue CLI 仍適合需要穩定配置的項目。響應式系統在 Vue 3 中更加靈活，Composition API 成為首選。

7. 總結

本文介紹了如何搭建 Vue.js 開發環境，包括安裝 Node.js、npm/Yarn 和 Vue CLI，并創建第一個項目。我們還深入探討了 Vue.js 的 MVVM 模式和響應式原理，結合代碼示例展示了如何使用 ref、reactive、計算屬性和偵聽器。這些基礎知識為后續學習組件、路由和狀態管理奠定了基礎。希望本文能幫助你順利開啟 Vue.js 之旅！