F2E 前端工程文件

Appearance

Vue 3 入門：Vite 建構與 CDN 引入 ​

隨著前端開發工具的汰舊換新，Vue 3 的開發配置已經變得前所未有的輕量與直覺。過去沉重的 Webpack 腳手架（如 Vue CLI）已正式退居幕後。

在 2026 年，如果您想建立一個原生 Vue 3 應用程式，主流的方法只有兩種：一種是針對獨立專案的現代極速建構工具 Vite，另一種則是針對輕量網頁的 CDN 引入。

本文將詳細解析這兩種 Vue 3 安裝方法的步驟與適用場景，讓您用最乾淨、最現代的方式開啟 Vue 3 開發之旅。

零配置即開即用！使用 CDN 引入 Vue 3 ​

不是每個網頁都需要動用到 Node.js、編譯和打包。如果您只是要在現有的傳統網站（如 HTML 靜態頁、PHP、ASP.NET 專案）中加入一些動態資料綁定，或者只想寫個簡單的語法 Demo，Vue CDN 直連是最敏捷的選擇。

您不需要安裝任何軟體，只需在單一 HTML 檔案的 <body> 結尾前（或 <head> 內）加入 Vue 3 CDN 連結，並使用 Vue.createApp() 掛載 DOM 節點即可。

小提醒

透過 CDN 使用 Vue 時，可以讓設定更加簡單，但也無法用使用 Vue 單檔案元件(SFC) 語法。若需要完整元件化開發，建議跳轉至第二種 Vite 建構方法。

全域版 (Global) ​

此版本的 API 都以屬性方式暴露在全域的 Vue 物件上，適合最基礎的網頁快速套用。

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

ES Module 版 ​

目前主流瀏覽器都已原生支援 ES Module。因此，更推薦通過 CDN 搭配原生 ES Module 來引用 Vue 3，這能讓您寫出更接近現代前端語法的程式碼：

html
<script type="module">
  import {
    createApp,
    ref,
  } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
</script>

現代專案標準解！使用 Vite 建立 Vue 3 專案 ​

如果您打算開發一個完整的前端專案（例如後台管理系統、SaaS 產品、現代網頁 App），Vite 是官方目前唯一指定的 Vue 3 建立工具。

Vite 基於瀏覽器原生 ESM (ES Modules)，解決了過往打包體積過大、熱更新 (HMR) 緩慢的問題。它帶來了秒級的伺服器啟動回應速度，並且完美整合了 Pinia 狀態管理與 TypeScript。

環境建置與 Node.js 檢查 ​

在建立 Vite 專案前，請先確認本機電腦是否已安裝 Node.js 環境。如果尚未安裝，建議先閱讀 什麼是 NVM？管理 Node.js 版本的終極指南 這篇文章進行配置。

請開啟終端機 (Terminal)，切換路徑至您的工作目錄，並輸入以下官方推薦的 Vue 3 建立指令：

sh
npm create vue@latest

客製化專案選單配置 ​

指令執行後，系統會引導您進行一連串的交互式選單，您可以根據 Vue 3 專案的需求靈活勾選：

  1. Project name: 專案命名（例如：my-project）
  2. Add TypeScript? 是否加入 TypeScript 支援
  3. Add JSX Support? 是否支援 JSX 語法
  4. Add Vue Router for Single Page Application development? 是否安裝 Vue 路由（SPA 開發必備）
  5. Add Pinia for state management? 是否使用 Pinia 進行跨元件狀態管理
  6. Add Vitest for Unit Testing? 是否加入單元測試工具
  7. Add an End-to-End Testing Solution? 是否加入 E2E 整合測試
  8. Add ESLint for code quality? 是否啟用 ESLint 語法檢查
  9. Add Prettier for code formatting? 是否啟用 Prettier 程式碼美化格式化

啟動本地開發伺服器 (Local Server) ​

選填完畢後，依序執行以下指令，切換至專案資料夾、安裝 npm 依賴套件並啟動 Vite 開發伺服器：

sh
cd my-project
npm i
npm run dev

啟動成功後，終端機將顯示本地網址。打開瀏覽器前往 http://localhost:5173，您就能看到熱騰騰的 Vue 3 官方歡迎畫面，正式展開您的現代前端開發！

Copyright © 2025-Present