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

目錄

• 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 已安裝完成。

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

npm create vue@latest

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

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

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

npm run build

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

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

此時我們可能會好奇，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壓縮後的大小：

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

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

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

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

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

1. 創建專案資料夾： 首先，在本地創建一個名為vue-test的資料夾，並在其中建立一個index.html 文件。
2. 使用 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>

3. 匯入 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。

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

總結

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