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 物件上，適合最基礎的網頁快速套用。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>ES Module 版
目前主流瀏覽器都已原生支援 ES Module。因此，更推薦通過 CDN 搭配原生 ES Module 來引用 Vue 3，這能讓您寫出更接近現代前端語法的程式碼：
<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 建立指令：
npm create vue@latest客製化專案選單配置
指令執行後，系統會引導您進行一連串的交互式選單，您可以根據 Vue 3 專案的需求靈活勾選：
- Project name: 專案命名（例如：my-project）
- Add TypeScript? 是否加入 TypeScript 支援
- Add JSX Support? 是否支援 JSX 語法
- Add Vue Router for Single Page Application development? 是否安裝 Vue Router 路由（SPA 開發必備）
- Add Pinia for state management? 是否使用 Pinia 進行跨元件狀態管理
- Add Vitest for Unit Testing? 是否加入單元測試工具
- Add an End-to-End Testing Solution? 是否加入 E2E 整合測試
- Add ESLint for code quality? 是否啟用 ESLint 語法檢查
- Add Prettier for code formatting? 是否啟用 Prettier 程式碼美化格式化
啟動本地開發伺服器 (Local Server)
選填完畢後，依序執行以下指令，切換至專案資料夾、安裝 npm 依賴套件並啟動 Vite 開發伺服器：
cd my-project
npm i
npm run dev啟動成功後，終端機將顯示本地網址。打開瀏覽器前往 http://localhost:5173，您就能看到熱騰騰的 Vue 3 官方歡迎畫面，正式展開您的現代前端開發！
常見問題
建立 Vue 3 專案該用 Vite 還是 CDN？
要開發完整專案、使用 .vue 單檔案元件、路由與模組化開發，就用 Vite；只是想在既有網頁加上一點動態綁定，或寫個語法 Demo，用 CDN 引入最快，不需要安裝任何工具。
還可以使用 Vue CLI 建立專案嗎？
Vue CLI 已進入維護模式，官方不再建議用於新專案。現在建立 Vue 3 專案的官方指令是 npm create vue@latest，底層使用 Vite。
vue.global.js 與 vue.esm-browser.js 有什麼差別？
前者把 API 掛在全域的 Vue 物件上，用 <script> 引入後直接使用；後者是 ES Module 版本，要寫在 <script type="module"> 裡以 import 取用，寫法更接近現代前端專案。
用 CDN 可以寫 .vue 單檔案元件嗎？
不行。單檔案元件需要建置工具編譯，CDN 環境下只能用模板字串或 <template> 標籤定義元件。需要 SFC 就改用 Vite 建立專案。
npm create vue@latest 的選單該怎麼選？
初學者可以先全部選 No，只保留最乾淨的專案結構；要做多頁面的 SPA 就加 Vue Router，需要跨元件共用資料再加 Pinia，團隊協作則建議開啟 ESLint 與 Prettier。這些套件之後都能自行安裝，不必一開始就決定。
npm run dev 之後網址是什麼？
Vite 預設會啟動在 http://localhost:5173，終端機也會直接顯示網址。若該連接埠已被占用，Vite 會自動改用下一個可用的號碼。
