前言

昨天大致介紹了Vue的核心概念，今天就來談建置環境的部分。

創建環境

在 Vue 官方文件中，官方建議開發人員將 Vite 作為 Vue.js 應用程序的開發工具。

在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
來源：官方文件

為什麼使用Vite？

讓我們先看官方文件對Vue Vite的說明：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

來源：官方文件

由於現代瀏覽器開始支持原生 ES6 模塊，Vite 利用了這一特性，將開發環境與生產環境分開。這意味著在開發時，你可以使用原生的 ES6 模塊語法，無需進行繁瑣的轉譯和打包，這加速了開發過程並減小了開發環境的複雜性。

Vite 的開發服務器也採用了一種創新的方式，它只會為正在請求的文件提供服務（從Http的request 來載入模組），而不會像傳統的打包工具那樣提供整個應用程序的構建。

圖片來源：官方文件

什麼是模塊熱更新？

模塊熱更新（Module Hot Replacement，簡稱HMR）是一種前端開發工具，它允許在應用程式運行時替換、添加或刪除模塊，而無需刷新整個頁面。這個特性大大提高了開發效率，因為開發者可以立即看到對代碼的更改在瀏覽器中的效果，而不需要手動刷新頁面。

補充資料：官方文件對模塊熱替換的說明

什麼又是Rollup？

Rollup 是一個現代的 JavaScript 模組打包工具，它主要用於將多個 JavaScript 模組檔案合併成一個或多個單獨的檔案，以便在瀏覽器或其他環境中使用。

• Rollup 支援 ES6 模組、CommonJS 和 AMD 等多種模組化規範，使得你可以方便地引入、匯出和管理 JavaScript 模組。

It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries.
來源：官方文件

• 是著名的 Tree Shaking 工具之一，這意味著它可以檢測和刪除未使用的代碼，以減小輸出檔案的體積。

Vite摘要

1. 快速的開發環境搭建：

• Vue Vite 使用了現代的 ES 模組化構建，這意味著在開發時，無需等待漫長的構建時間。

2. 性能優化：

• Vue Vite 的性能非常出色。它採用了新一代的Rollup打包器，使得構建和運行速度非常快，開發者可以更加高效地工作

3. 開發體驗：

• 支持 TypeScript 和 JavaScript 之間的無縫切換，使得開發過程更加順暢。

4. 插件生態系統：

• Vue Vite 具有豐富的插件生態系統，你可以輕鬆地擴展其功能，以滿足專案的需求。
• 社區活躍，有很多第三方插件和工具可供選擇。

5. 適用範圍：

• Vue Vite 主要用於現代 Web 開發，特別適用於單頁應用（SPA）和漸進式 Web 應用（PWA）的開發。
• 它也適用於快速原型開發和構建小型到中型規模的應用程序。

安裝指令

同樣是在已經安裝Node.js的情況下，基於Vite的構建設定安裝Vue

npm create vite@latest

輸入專案名稱

✔ Project name: … <your-project-name>

可選功能提示

我們就可以依照尋求安裝其他套件（Router、Typescript）等

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

• JSX Support：JSX 支持是一種用於在 JavaScript 中編寫類似 HTML 結構的語法，通常與 React 一起使用，以創建動態的用戶界面。
• Vue Router（建議安裝）：Vue Router 是用於單頁應用程序開發的 Vue.js 官方路由庫，用於管理頁面之間的導航和狀態。
• Pinia（建議安裝）：Pinia 是一個狀態管理庫，專門用於 Vue.js 應用程序，幫助開發者更輕鬆地管理和共享應用程序的狀態。
• Vitest：Vitest 是一個端到端測試解決方案，用於測試 Vue.js 應用程序，以確保其在不同環境和用戶操作下的正常運行。
• ESLint（建議安裝）：ESLint 是一個JavaScript代碼檢查工具，用於靜態分析代碼以查找和修覆潛在的代碼錯誤和風格問題。
• Prettier（建議安裝）：Prettier 是一個代碼格式化工具，用於自動格式化代碼，以確保代碼風格一致性和可讀性。

安裝完成後，系統會出現安裝完成的提示

然後進入專案目錄

cd [專案名稱]

安裝npm

npm install

啟動伺服器來執行專案

npm run dev

我們就可以即時編譯程式碼與畫面了！

點擊網頁後，即會出現最簡單安裝完Vue+Vite介面的畫面

到這一步，你已經成功建置完最基礎Vue + Vite的環境了。

結語

今天的分享就到這裡，明天將會說明Vue專案的資料夾，以及最簡單的Vue使用方法。

參考資料

1. 官方文件
2. 真的好想離開 Vue 3 新手村 - Day 2: 建立 Vue 專案開發環境 feat. Vite
3. Vue Vite官方文件
4. roll up官方文件
5. Vite + Vue 3 第一個網站
6. Vite vs webpack(以vue-cli為主)