前兩篇我們介紹了什麼是 Vue.js，以及介紹了我們接下來要寫的語言 Typescript，那接下來要進到我們的「環境建置及設置」了。接下來我們這一篇，會著重在怎麼建立我們要開發的環境，以及檔案結構上面的介紹。以下的教學，我們會以 VS Code 為例；如果尚未安裝 VS Code 的，可到 VS Code 官方網站下載，依照讀者的作業系統環境安裝即可。
可能對於已經有寫過 Vue 一段時間的讀者會很疑惑，為何不用 Nuxt 或是其他框架。其實這裡我會帶一個非常主觀的解釋，本文教學會使用對新手友善的建構工具，本教學如果一開始就教 Nuxt，反而會牽扯到太多許多新手不一定需要即時用到的觀念（例如 CSR、SSR、SSG、...等）。且 Nuxt 更偏向大型的應用，未來我們也會介紹到部署的部分，為了避免增加麻煩，我們選擇更輕便，設定對新手更友善的建構工具「Vite」。
如果讀者尚未接觸過任何框架，以上解釋讀者可以稍微忽略，只需知道 Vite 他是一個輕量化的建構工具，且目前也有許多人使用，是一個很適合當作入門的建構工具。如果讀者在學會使用建構工具以及如何設定後，有一定的進階知識，可以再選擇更進階的框架或是 Nuxt 再學習。
這邊要注意的是，Vite是建構工具，而非框架！
好了以上廢話不多說，我們來開始正式教學吧！
VS Code 是全球許多人會使用的「整合開發環境（IDE）」，為了好稱呼，我們就姑且稱其為「編輯器」吧！許多人會簡稱為 IDE，或是 editor，我個人和身邊朋友大多都傾向稱其「IDE」，聽起來也比較專業，可以好裝逼（X。
擁有一個強大的編輯器還不夠，我們還需要客製化一下。這就好比讀者買了一輛機車，可能是勁戰，讀者可能會想要改管或是改輪胎等，使其變得更強大，性能更好。因此，以下會介紹我常用的擴充功能，安裝這些擴充功能可以開發者更快速地進行開發。
所謂的語法高亮，顧名思義就是，開發者在進行程式碼開發的時候，會針對一些保留字、變數、值、...等，其字體顏色或是背景色會有所改變。針對新手開發者，我也建議可以安裝這個擴充，對於專案開發，可以減少眼花撩亂的情況。
如果您想安裝，可以透過此連結。讀者可以進入這個頁面來查看他的詳細功能，圖片我就不放了，裡面有完整示範。
這個套件可以幫助您快速建立一個 Vue 的程式碼結構，對於新手來說是非常友善的。
如果您想安裝，可以透過此連結。讀者可以進入這個頁面來查看他的詳細功能，圖片我就不放了，裡面有完整示範。
Node.js 是什麼？讀者可以將其想像成，如果架設網站，需要一個伺服器去啟動。而我們想要在本地端開發 Vue.js，我們可以使用 Node.js。簡短來說，Node.js 是一個可以提供 JavaScript 用於伺服器及本機端上開發的執行環境。建構在之上，有非常多好用的模組供我們使用。我們可以安裝伺服器框架，例如 Express.js，但我們篇幅有限，這裡就不多做介紹。
首先，先到 Node.js 官網下載吧。
相信各位都會安裝了，選擇 runtime 後，環境變數會自動設定完成。
重新登入作業系統後，可以輸入以下指令測試
node -v
npm -v
如果有跑出版本，那就意味著您安裝成功了。
npm 是一套「套件管理工具」，它可以讓開發者透過 npm 安裝許多好用的模組套件。舉個例子，假設讀者在玩一款遊戲，肯定會想要買 DLC 或是安裝模組的... 對吧（？那麼安裝DLC及模組的工具就是 npm，而模組及外掛就是所謂的「套件（package, pkg）」。
而 pnpm 則是基於 npm 更高效及快速的套件管理工具，讀者可以透過以下指令安裝：
# 本教學以最新版的文檔為例
npm install -g pnpm
當然！你也可以透過 brew（MacOS） 或是 winget（Windows） 安裝，這裡就不再說明，可以按照官方文檔安裝。
安裝完成之後可以輸入：
pnpm -v
如果有跑出版本，代表安裝成功摟！
如果開發者想透過 pnpm 安裝套件，可以使用以下指令：
pnpm add <套件名稱>
# 或
pnpm i <套件名稱>
如果開發者想透過 pnpm 解除安裝套件，可以使用以下指令：
pnpm remove <套件名稱>
# 或
pnpm rm <套件名稱>
接著，我們透過以下指令建立專案：
# latest 是最新版
pnpm create vite@latest
要進去資料夾裡面，需要透過以下指令：
cd <資料夾>
例如：cd test-project
進入之後，我們接著輸入以下指令，以更新及安裝套件：
pnpm i
我們可以透過以下指令來執行專案：
pnpm dev
如果有正確執行成功，會看到以下畫面：
VITE v7.1.6 ready in 819 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
第一行的 VITE v7.1.6 指的是其版本，後面的 819 ms 指的是開啟時間。
下面三行的第一行，是本地伺服器的網址，預設使用的 port 都是 5173，我們只需要打開 http://localhost:5173/，即可看到畫面。
第二行，則是提示開發者，可以使用 pnpm dev --host <ip（可選）> 來讓同個網段的人使用。
第三行，則是提示開發者，可以透過組合鍵h + enter 來顯示幫助文檔。
我們打開終端機提示的網址之後，沒意外會看到網頁，如果讀者想要安全退出，可以透過組合鍵 ctrl + c 來退出。注意！這在終端機裡並非「複製」。也請勿使用 ctrl + z，否則他只是暫時被暫停而已。
當讀者透過 pnpm dev 執行伺服器之後，此時讀者改動程式碼之後，網頁也會同步改變，我們稱其為「熱更新」。顧名思義就是網頁會隨著開發者改動程式碼而變動，開發者就不需改動程式碼後還要重新整理網頁，減少開發時間成本，提高效率。
讀者可以在 VS Code 打開 src/App.vue的檔案。
可以看到中間有一行寫著 <HelloWorld msg="Vite + Vue" />。
讀者可以自行改動msg=後面的值，然後使用組合鍵 ctrl + s 以儲存。此時網頁會自動更新，而不用重新載入（熱更新）。
例如可以改成 <HelloWorld msg="鐵人賽" />，此時網頁上會出現「鐵人賽」字樣，即成功。
如果讀者到這一步都沒問題，讀者可以輸入 tree 來查看檔案目錄，或是打開檔案管理員查看，大致檔案結構會長這樣：
.
└── vite-project（您的專案名稱）
├── index.html（專案入口 HTML，瀏覽器執行時會讀取這個檔案）
├── node_modules（安裝的所有套件存放處，通常不用手動修改）
│ ├── @vitejs
│ │ └── plugin-vue -> ../.pnpm/...（Vite 官方的 Vue 插件，讓 Vite 能解析 .vue 檔）
│ ├── @vue
│ │ └── tsconfig -> ../.pnpm/...（Vue 官方提供的 TypeScript 設定，共用型別配置）
│ ├── typescript -> .pnpm/...（TypeScript 編譯器本體）
│ ├── vite -> .pnpm/...（Vite 核心工具）
│ ├── vue -> .pnpm/...（Vue 3 核心程式庫）
│ └── vue-tsc -> .pnpm/...（Vue TypeScript 型別檢查工具）
├── package.json（專案描述檔，記錄專案名稱、版本、依賴套件與可執行指令）
├── pnpm-lock.yaml（套件版本鎖定檔，確保每次安裝的版本一致）
├── public（公開靜態檔案，會直接對應到最終網站，不會被編譯）
│ └── vite.svg（靜態資源，範例圖片）
├── README.md（專案說明文件，通常介紹專案用途與指令）
├── src（專案主要程式碼目錄）
│ ├── App.vue（主元件，整個專案的入口 Vue 元件）
│ ├── assets（靜態資源資料夾，會被編譯，例如圖片、樣式）
│ │ └── vue.svg（範例圖片）
│ ├── components（元件資料夾，放置自訂 Vue 元件）
│ │ └── HelloWorld.vue（範例子元件，展示基本 Vue 語法）
│ ├── main.ts（專案進入點，將 Vue 掛載到 index.html）
│ ├── style.css（全域 CSS 樣式）
│ └── vite-env.d.ts（Vite 的 TypeScript 型別宣告檔，讓 TS 理解專案環境）
├── tsconfig.app.json（針對應用程式的 TypeScript 設定）
├── tsconfig.json（TypeScript 主設定檔）
├── tsconfig.node.json（針對 Node.js 環境的 TS 設定，例如 vite.config.ts）
└── vite.config.ts（Vite 設定檔，可修改插件、別名、打包設定等）
15 directories, 15 files（15個資料夾，15個檔案）
這個檔案非常重要，讀者可以將其想像成「專案的說明書」，記載著所需要的套件以及其版本、專案名稱、專案版本、專案可以執行的指令、...等。
一個正常的 package.json 大概都會有以下這些元素：
{
// 以下是專案資訊
"name": "專案名稱",
"version": "版本",
"type": "module",
// 以下是可以執行的指令
"scripts": {
"dev": "vite", // 熱更新
"build": "vue-tsc -b && vite build", // 會在 build 之前進行 ts 型別檢查
},
// 以下都是依賴套件
"dependencies": {
"vue": "^3.5.21" // vue 套件
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1", // vite 套件
"@vue/tsconfig": "^0.8.1", // typescript vue 套件
"typescript": "~5.8.3", // ts 本體
"vite": "^7.1.6", // vite 本體
"vue-tsc": "^3.0.7" // vue ts 編譯封裝
}
}
這邊注意一下，註解是專門講解，如果需要複製的，需要把註解拿掉，否則json檔會報錯。
鎖定套件的實際版本，確保不同電腦安裝時版本一致。本教學用的是 pnpm，因此只會看到 pnpm-lock.yaml，他可以掛勾確切的套件版本依賴。因此，讀者可以將 package.json 視作是外掛擴充的版本，而 pnpm-lock.yaml 或 package-lock.json 視作 外掛擴充所需要的依賴套件版本。實際我們在開發的時候，並不會特別去修改這個文件。
這個資料夾，是存放 pnpm-lock.yaml 或 package-lock.json 所安裝下來的依賴即套件本體。我們需要套件，才能夠執行這個建構工具與框架。因此這個資料夾可能會非常龐大，專案一大，可能動輒數GB以上。當然大多數情況如果是小專案可能也就10MB至幾百MB而已，因此依照專案複雜度和大小而定。
這個檔案是作為 vite 的設定檔，供開發者進行套件、路徑別名、打包設定、...等等的修改。目前不需要去使用到他，但讀者可以先打開來看看，大概會有這些：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()], // vite 需要執行 vue 插件
})
開發者在一個階段完成開發之後，會需要部署到實際伺服器上，因此我們需要能夠「建構」專案，我們可以透過以下指令：
pnpm build
此時，vite會編譯整個專案，並輸出一個最終的專案於 dist/ 資料夾裡，這個資料夾裡裝的就是整個專案檔了。開發者可以拿著這個專案檔放置在伺服器上，例如 GitHub Pages、Vercel、Cloudflare Pages、... 等。由於新手階段並不會使用到 Server Side，因此常見的 static page 部署皆可運行。
由於上一篇，有朋友和我說我寫得太長了XD，因此本篇我大幅減少了篇幅，上一篇寫到了七千多個字，如果此篇再更進階解釋，可能會到上萬字。因此我使用更簡潔的詞來解釋，也盡量用更少的字數達成我想教學的。當然，本教學對於想要打下更扎實基礎的讀者們顯然還是不夠，但對於想要入門 Vue.js 的人來說是非常夠的。不過我還是能夠希望讀者如果看完之後，能夠再到官方文檔做更深入的學習。
看完此篇之後，大概讀者會對名詞解釋有大概的認識了，這就是最基本的結構了。下一篇我們將介紹 Vue 更詳細檔案結構及初探程式碼結構。且聽下回分解！
iThome鐵人賽
看影片追技術
看更多