Vue 3 用實作帶你看過核心概念 - Day 3：使用 Vite 建構工具搭建 Vue 專案 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 3

Modern Web

Vue 3 初學者：用實作帶你看過核心概念系列第 3 篇

Vue 3 用實作帶你看過核心概念 - Day 3：使用 Vite 建構工具搭建 Vue 專案

16th鐵人賽 vue3 options api

Antonio

2024-09-16 23:29:45

90 瀏覽

分享至

文章背景圖

Vite 環境搭建 Vue 專案（適用於正式開發環境）
- Step 1：安裝 Vue 套件並執行 create-vue
- Step 2：執行對應指令並啟動開發伺服器
- Step 3：npm run build 打包文檔
- Step 4：npm run preview 啟動伺服器讀取打包完後文檔
使用 CDN 匯入 Vue HTML（適用於快速測試功能）
總結

Vite 環境搭建 Vue 專案(適用於正式開發環境)

Step 1：安裝 Vue 套件並執行 create-vue

⭐ 需要特別注意，需要事先安裝Nodejs。若不確定是否已安裝 Nodejs 也可以開啟終端機，執行以下指令確認版本。

node -v

如果終端機介面上顯示對應版本號，代表 Nodejs 已安裝完成。

nodejs cmd 確認版本畫面

Vue 官方提供了一個快速建置 Vue 專案的鷹架工具（Vue project scaffolding tool）。使用以下指令即可創建新專案，並根據中文提示進行配置：

npm create vue@latest

這裡的範例中，選擇默認的配置（按下 Enter）。安裝完成後，你會擁有一個基於 Vite 的 Vue 專案。

Vue project scaffolding tool 安裝流程

Step 2：執行對應指令並啟動開發伺服器

專案建置完成後，您可以使用以下指令來啟動開發伺服器：

npm run build

如圖所示，我們透過Vite 構建工具成功啟動了本地開發伺服器。

Vue 安裝完成啟動 HMR 模式

在瀏覽器中輸入顯示的網址，即可訪問本地開發環境。

Vue 初始化畫面

此時我們可能會好奇，npm run dev背後到底發生了什麼？我們可以回過頭來查看這個 Vue 專案的資料夾，了解它提供了哪些資訊。

在package.json中的scripts 區塊，我們可以看到dev對應的實際指令：

dev：啟動熱模塊替換模式 (HMR)，即時更新變動的部分，動態渲染畫面，而不會實際打包檔案。
build：將專案的所有文件打包成 JavaScript 檔案，因為瀏覽器只能執行 JavaScript。
preview：預覽打包後的應用，模擬生產環境，確認應用在部署後的運行效果。

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.4.5"
  }
}

Step 3：npm run build 打包文檔

當完成開發並準備進行部署時，可以執行以下指令來打包專案：

npm run build

打包完成後，生成的文件將被存放於dist資料夾內。可以看到每個檔案的原始大小以及使用gzip壓縮後的大小：

Vite 執行完打包指令

Step 4：npm run preview 啟動伺服器讀取打包完後文檔

在執行npm run preview前，請先進行打包 (npm run build)。打包完成後，npm run preview將啟動一個本地伺服器，模擬生產環境的運行效果。

啟動生產環境模擬伺服器

如圖所示，啟動的模擬伺服器將會從dist資料夾中讀取打包後的文件，渲染並模擬生產環境的運行效果。這樣可以方便開發者在本地預覽應用的最終效果，確保在生產環境中能正常運行。

生產環境模擬伺服器讀取 dist 打包後文檔渲染

使用 CDN 匯入 Vue HTML（適用於快速測試功能）

在使用 Visual Studio Code 進行開發時，可以快速創建一個 Vue 測試環境。以下是使用 CDN 匯入 Vue 並進行快速測試的步驟：

創建專案資料夾：首先，在本地創建一個名為vue-test的資料夾，並在其中建立一個index.html 文件。
使用 Emmet 語法生成 HTML 結構：在index.html中，可以使用Emmet 語法快速生成基本的 HTML 結構。在 Visual Studio Code 中輸入! 並按下 Tab 鍵，即可生成標準的 HTML 結構。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

匯入 Vue UMD 模組：可以直接在 HTML 中匯入 Vue，而不需要進行任何打包處理。

<!-- 匯入 Vue 的 UMD 模組 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

匯入 Vue CDN 後，你可以在全域的window 物件上看到 Vue 所定義的屬性和方法。

console.log(window)

這表示 Vue 已成功載入，開發者可以在 HTML 頁面中直接使用 Vue 所提供的功能和 API。

Window 全域變數 Vue 屬性

創建 Vue 應用並掛載至 HTML 元素：透過 createApp 方法來建立 Vue 應用，並將其掛載到指定的 HTML 元素。這樣 Vue 就可以接管該元素內的內容並進行數據管理與畫面更新。

Vue 掛載對應 HTML 標籤(內容將由 Vue 進行管理)

總結

使用 Vite 搭建 Vue 專案：透過 Vue 的鷹架工具，可以快速搭建完整的 Vue 開發環境（如支援 TypeScript、Router 等）。Vite 提供了預設的指令來啟動開發伺服器，並支援熱模塊替換 (HMR)，讓開發過程更加高效。此外，還能進行專案文件的打包以及啟動生產環境預覽伺服器。
使用 CDN 快速搭建 Vue 測試環境：可以透過引入 Vue 的 UMD CDN 模組，快速在 HTML 中使用 Vue，建立一個輕量的測試環境。這種方式適合用於簡單功能測試，但由於缺乏打包和優化處理，不建議用於正式專案的開發。