在 Vue 2 時期，我們大多數人都靠 webpack 來進行打包編譯，但隨著專案變大，編譯速度會越來越慢，等待時間動輒幾分鐘；Vue 3 官方推薦的工具 Vite，就是為了解決這個痛點而誕生的。

Webpack 和 Vite 最大差異

• Webpack： 先把專案所有檔案「打包成一大包」再啟動。

圖片來源：六角學院

• Vite： 採用 ESM (原生 ES module)，只編譯「瀏覽器真的要載入的檔案」，速度飛快。

圖片來源：六角學院

1-建立專案

先確認環境：

node -v
npm -v

如果版本符合要求，就可以直接建立專案：

npm create vite@latest

接下來會跳出幾個問題：

• 專案名稱（建議英文小寫）
• 選擇框架 → Vue
• 語言版本 → Vue + TypeScript

輸入完成後，進到專案資料夾並安裝套件：

cd 專案名稱
npm install
npm run dev

此時你應該可以在瀏覽器看到 Vue 預設的歡迎頁面。

2-認識專案結構

Vite 幫我們生成了一些檔案，快速看一下：

• node_modules：所有安裝的套件。
• package.json：專案設定檔。
• src/：開發的主資料夾。
  • main.ts：專案進入點，掛載 App.vue。
  • App.vue：主要元件，可以開始開發。
• public/：靜態檔案，不會被編譯。
• index.html：專案入口。

3-Vue 3.5 Composition API 寫法

在 App.vue 可以看到類似這樣的範例：

<script lang="ts" setup>
import { ref } from 'vue'

// 建立響應式變數
const count = ref<number>(0)

const increase = () => {
  count.value++
}
</script>

<template>
  <button @click="increase">點我 +1</button>
  <p>目前計數：{{ count }}</p>
</template>

重點：

• ref<number>(0) → 加上型別。
• <script setup> → 無需 export default，更精簡。

4-新增元件

新增一個 CardComponent.vue：

<script lang="ts" setup>
import { ref } from 'vue'

const text = ref<string>('Hello from CardComponent')
</script>

<template>
  <div class="card">
    <p>{{ text }}</p>
  </div>
</template>

<style scoped>
.card {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>

在 App.vue 匯入並使用：

<script lang="ts" setup>
import CardComponent from './components/CardComponent.vue'
</script>

<template>
  <CardComponent />
</template>

5-安裝外部套件（axios 範例）

安裝：

npm install axios

建立 useUser.ts composable（可重用邏輯）：

// src/composables/useUser.ts
import { ref, onMounted } from 'vue'
import axios from 'axios'

export function useUser() {
  const user = ref<any>(null)

  const fetchUser = async () => {
    const res = await axios.get('https://randomuser.me/api/')
    user.value = res.data.results[0]
  }

  onMounted(fetchUser)

  return { user, fetchUser }
}

在 App.vue 使用：

<script lang="ts" setup>
import { useUser } from './composables/useUser'

const { user, fetchUser } = useUser()
</script>

<template>
  <div>
    <button @click="fetchUser">重新取得使用者</button>
    <pre>{{ user }}</pre>
  </div>
</template>

6-打包與路由設定

當專案要上線，可以執行：

npm run build

會生成 dist/ 資料夾。

若使用 Vue Router，記得設定：

import { createRouter, createWebHashHistory } from 'vue-router'

避免重新整理後出現 Cannot GET /about 的錯誤。

7-使用環境變數

在根目錄建立 .env：

VITE_API=https://randomuser.me/api/

使用方式：

console.log(import.meta.env.VITE_API)

這樣就能根據不同環境切換 API。

小結

Day 3 我們完成了：

1. 使用 Vite 建立 Vue 3.5 + TS 專案
2. 認識專案結構
3. 使用 <script lang="ts" setup> 撰寫 Composition API
4. 新增元件
5. 建立 Composable 並使用 axios
6. 打包專案與環境變數設定

給自己掌聲，正式開始 Vue 3.5 開發的第一步，後面一起加油！

歷史文檔

以下是過往的歷史紀錄可以一起參考：新專案建立流程 step by step 截圖分享，以及如何部署

1. 魔法編譯器 - vite

2. 旅程最終回 - vite 部署到 GitHub