iT邦幫忙

2024 iThome 鐵人賽

DAY 3
3
Modern Web

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

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

  • 分享至 

  • xImage
  •  

文章背景圖

目錄

  • 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 並進行快速測試的步驟:

  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>
  1. 匯入 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 屬性

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

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

總結

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

上一篇
Vue 3 用實作帶你看過核心概念 - Day 2:命令式編程 vs 聲明式編程
下一篇
Vue 3 用實作帶你看過核心概念 - Day 4:基於 Vite 建構工具的 Vue 專案結構解析
系列文
Vue 3 初學者:用實作帶你看過核心概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言