Vue 環境建置

在開始撰寫 Vue 之前，你需要先建立開發環境。本篇將介紹如何使用現代工具快速建立 Vue 專案。

事前準備

在開始之前，請確保你的電腦已安裝：

你可以在終端機輸入以下指令確認 Node.js 是否安裝成功：

node -v
npm -v

如果有顯示版本號碼，表示安裝成功。

使用 Vite 建立 Vue 專案

Vite 是 Vue 團隊開發的建構工具，也是目前官方推薦的建立 Vue 專案方式。它的特色是啟動速度極快、熱更新即時，開發體驗非常好。

在終端機執行以下指令來建立專案：

# 建立專案
npm create vue@latest

執行後會出現一系列問題讓你選擇專案設定：

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

對於初學者，建議先選擇「No」來保持專案簡單。之後隨著學習進度，可以再加入這些功能。

設定完成後，依照提示執行：

# 進入專案資料夾
cd my-vue-app

# 安裝依賴套件
npm install

# 啟動開發伺服器
npm run dev

執行 npm run dev 後，終端機會顯示類似這樣的訊息：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

打開瀏覽器，前往 http://localhost:5173/，你會看到 Vue 的歡迎畫面，恭喜你成功建立了第一個 Vue 專案！

專案結構介紹

建立完成後，你的專案資料夾結構大致如下：

my-vue-app/
├── node_modules/       # 依賴套件（不需要手動修改）
├── public/             # 靜態資源（會直接複製到輸出目錄）
│   └── favicon.ico
├── src/                # 原始碼（主要工作目錄）
│   ├── assets/         # 圖片、樣式等資源
│   ├── components/     # Vue 元件
│   │   └── HelloWorld.vue
│   ├── App.vue         # 根元件
│   └── main.js         # 程式進入點
├── index.html          # HTML 模板
├── package.json        # 專案設定與依賴清單
└── vite.config.js      # Vite 設定檔

重要的檔案說明：

  • src/main.js：程式的進入點，負責建立 Vue 應用程式並掛載到 HTML
  • src/App.vue：根元件，整個應用程式的最外層元件
  • src/components/：存放可重複使用的元件
  • index.html：HTML 模板，包含一個 <div id="app"> 作為 Vue 的掛載點

檔案內容解析

讓我們來看看幾個重要檔案的內容：

main.js（程式進入點）

import { createApp } from 'vue';
import App from './App.vue';

import './assets/main.css';

// 建立 Vue 應用程式並掛載到 #app 元素
createApp(App).mount('#app');

這段程式碼做的事情：

  1. 從 Vue 引入 createApp 函式
  2. 引入根元件 App.vue
  3. 使用 createApp 建立應用程式實例
  4. 用 mount('#app') 將應用程式掛載到 HTML 中 id 為 app 的元素

App.vue（根元件）

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" src="./assets/logo.svg" width="125" height="125" />
    <HelloWorld msg="You did it!" />
  </header>
</template>

<style scoped>
header {
  line-height: 1.5;
}
</style>

這是一個典型的 Vue 單文件元件（Single-File Component, SFC），包含三個區塊：

  • <script setup>：元件的 JavaScript 邏輯
  • <template>：元件的 HTML 模板
  • <style scoped>：元件的 CSS 樣式（scoped 表示樣式只作用於此元件）

index.html（HTML 模板）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

<div id="app"></div> 是 Vue 應用程式的掛載點，Vue 會將整個應用程式渲染到這個元素中。

開始你的第一個修改

現在讓我們來修改 App.vue，寫一個簡單的 Hello World：

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue!')
const count = ref(0)
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>這是我的第一個 Vue 應用程式</p>
    <button @click="count++">點擊次數：{{ count }}</button>
  </div>
</template>

<style scoped>
h1 {
  color: #42b883;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3aa876;
}
</style>

存檔後，瀏覽器會自動更新顯示你的修改，這就是 Vite 的熱模組替換 (Hot Module Replacement, HMR) 功能。

這個範例展示了 Vue 的幾個核心概念：

  • ref：建立響應式資料
  • {{ }}：模板插值，顯示資料
  • @click：事件綁定（v-on:click 的簡寫）

常用指令

在專案開發過程中，你會經常使用這些指令：

指令說明
npm run dev啟動開發伺服器
npm run build打包專案（產生正式環境用的檔案）
npm run preview預覽打包後的結果

推薦的 VS Code 擴充套件

如果你使用 VS Code 開發，以下擴充套件可以提升開發效率：

  • Vue - Official（原 Volar）：Vue 官方擴充套件，提供語法高亮、智慧提示
  • Vue VSCode Snippets：快速產生 Vue 程式碼片段
  • Prettier：程式碼格式化工具
  • ESLint：程式碼檢查工具
  • Auto Rename Tag：自動重新命名配對的標籤
安裝 Vue - Official 後，如果你之前有安裝舊版的 Vetur 擴充套件，請停用它以避免衝突。

透過 CDN 使用 Vue（不推薦用於正式專案）

如果只是想快速試玩 Vue，也可以直接透過 CDN 引入：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue CDN Demo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <button @click="count++">點擊次數：{{ count }}</button>
    </div>

    <script>
      const { createApp, ref } = Vue;

      createApp({
        setup() {
          const message = ref('Hello Vue!');
          const count = ref(0);
          return { message, count };
        },
      }).mount('#app');
    </script>
  </body>
</html>

這種方式適合快速原型開發或學習，但不適合正式專案，因為無法使用單文件元件和建構工具的優化功能。

其他建立專案的方式

Nuxt.js（推薦用於正式專案）

Nuxt.js 是基於 Vue 的全端框架，提供伺服器端渲染 (SSR)、靜態網站生成 (SSG) 等功能：

npx nuxi@latest init my-nuxt-app

Nuxt 適合用於需要 SEO 的網站或大型應用程式。

Vue CLI（已不推薦）

Vue CLI 曾經是官方推薦的建立工具，但 Vue 團隊現在已改推薦使用 Vite（也就是 npm create vue@latest）。如果你看到舊的教學使用 Vue CLI，建議改用 Vite。