目錄

• Vue 鷹架工具產生基於 Vite 環境的專案樹狀結構
• index.html：專案的入口文件
• vite.config.js：Vite 應用的配置文件
• src 資料夾：應用的核心代碼
• public 資料夾：存放公開靜態資源
• 專案中的其他文件與資料夾
• 總結

Vue 鷹架工具產生基於 Vite 環境的專案樹狀結構

在 Day 3 的教學中，學習了如何使用 Vue 鷹架工具(Vue project scaffolding tool)來生成一個基於 Vite 環境的專案。今天，我將更進一步地解析這個專案的資料夾結構，幫助大家更好地理解每個檔案和資料夾的用途與功能。

專案樹狀結構圖(不展開 node_module 資料夾)：

├── README.md
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── node_module
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   │       ├── IconCommunity.vue
│   │       ├── IconDocumentation.vue
│   │       ├── IconEcosystem.vue
│   │       ├── IconSupport.vue
│   │       └── IconTooling.vue
│   └── main.js
└── vite.config.js

index.html：專案的入口文件

index.html是專案的核心入口文件，負責提供 Vue 應用的基本 HTML 結構，並作為 Vue 應用的渲染容器，Vue 根組件通常會掛載在<div id="app"></div>元素上，並通過這個容器來動態渲染應用的內容。

在打包過程中（執行 npm run build），Vite 會自動將打包後的 JavaScript 和 CSS 文件插入到index.html中，並將最終生成的應用輸出到 dist 資料夾。這確保 Vue 應用在部署後能夠正常加載所有必要的資源（包括打包後的文件），以確保應用順利運行。

可以嘗試改變title的文字內容，並且透過打包的指令npm run dev啟動開發的伺服器，查看title的變化。

vite.config.js：Vite 應用的配置文件

專案的 Vite 配置文件，負責定義應用的開發和打包流程。在這個文件中，你可以配置插件、別名、開發伺服器設置等，來優化開發體驗和提升構建效率。

預設情況下，Vite 通常會包含一個路徑別名設定，如下：

alias: {
  '@': fileURLToPath(new URL('./src', import.meta.url))
}

這個設定非常實用，當你需要引用src資料夾下的檔案時，可以直接使用@ 符號來表示該目錄。在編譯過程中，Vite 會自動將@轉換為正確的絕對路徑，減少了相對路徑引用的麻煩，並使代碼更具可讀性和可維護性。

例如，預設專案在 /src/components/TheWelcome.vue 檔案中匯入 WelcomeItem 組件：

傳統的寫法是：

import WelcomeItem from './WelcomeItem.vue'

使用@ 別名後，你可以這樣寫：

import WelcomeItem from '@/components/WelcomeItem.vue'

src 資料夾：應用的核心代碼

src資料夾是專案中所有 Vue 組件和應用邏輯的核心部分，存放應用的組件、樣式和相關靜態檔案。

• App.vue：index.html是專案的入口文件，會透過載入main.js來啟動 Vue 應用。而main.js則會將 App.vue掛載到指定的 DOM 容器中（EX：<div id="app"></div>）。App.vue 作為根組件，是整個 Vue 應用的主入口，負責渲染初始內容並管理 Vue 應用的結構。
• assets 資料夾：存放 Vue 應用使用的靜態資源，如圖片和樣式表。預設的base.css定義了全域樣式，提供所有組件共用的基礎樣式。
• components 資料夾：存放應用中的 Vue 組件(HelloWorld.vue、TheWelcome.vue、WelcomeItem.vue)，每個組件以單文件組件（SFC, Single File Component）的形式存在，這意味著每個.vue 文件都包含template、script 和 style，將模板、邏輯和樣式整合在一起，方便管理和重用。這些組件各自負責應用的一部分功能，並可在整個應用中重複使用。

可以嘗試將HelloWorld.vue中的You’ve successfully created a project with改成Hello Vue!，並且透過npm run dev啟動開發的伺服器，查看其改變後渲染的成果。

【 SFC 元件各區塊簡易配置說明 】

• Template 標籤：每個 *.vue 文件僅能輸出一個 Template 作用域的區塊模板內容，可以使用HTML語法。
• Script 標籤：每個 *.vue 文件僅能輸出一個 Script 作用域的區塊，可以回傳 Vue 選項物件(data()、methods、生命週期)。
• Style 標籤：每個 *.vue 文件能輸出多個 Style 標籤。

public 資料夾：存放公開靜態資源

public 資料夾中的文件會在打包過程中直接被複製到最終的輸出目錄中，不會經過 Vite 的處理。因此，這裡的文件通常是一些不需要進行轉換的靜態資源。例如：網站圖標（favicon.ico）。

專案中的其他文件與資料夾

• README 檔案：說明文件。通常用來介紹專案的功能、安裝步驟、使用方式等資訊。
• jsconfig.json：jsconfig.json 是 JavaScript 專案的配置文件，用於設定編輯器的智能提示、代碼補全、語法檢查等功能。
• package-lock.json：用來鎖定專案中的依賴版本，確保每次安裝專案時都會獲取相同版本的依賴。這有助於確保專案的穩定性，避免因為依賴版本的變動導致的意外錯誤。
• package.json：專案的元數據文件，它記錄了專案的名稱、版本號、依賴套件，以及可以執行的指令。
• node_modules 資料夾：這個資料夾包含了專案所需的所有外部依賴。當執行npm install後，所有依賴會根據package.json被安裝到這裡。

總結

本文深入探討了基於 Vite 環境的 Vue 專案結構，幫助開發者理解每個資料夾與文件的用途。通過有效管理這些資源，開發者可以更有條理地構建和維護應用，並利用 Vite 建構工具的功能提升專案的開發效率。