本文將詳細介紹如何使用 Vite 建立 Vue 專案，並且探討在專案初始化之後如何管理各個檔案。

Vue專案載入

使用 Vite 建立 Vue 專案 Vite 是一個現代化的前端開發工具，特別適用於快速搭建 Vue 專案。以下是使用 Vite 創建 Vue 專案的步驟

步驟 1：安裝 Node.js 確保你的開發環境已經安裝了 Node.js 和 npm（Node Package Manager）。你可以在 Node.js 的官方網站（https://nodejs.org/）下載最新的 LTS 版本。

步驟 2：安裝 Vue CLI 首先，全局安裝 Vue CLI 工具，這將幫助我們快速生成 Vue 專案：

npm install -g @vue/cli

步驟 3：創建 Vue 專案 在創建 Vue 專案之前，先確定你想要的目錄位置，然後運行以下命令：

vue create my-vue-project

接下來，你會被要求選擇 Vue 專案的配置。你可以選擇默認配置，或者根據你的需求選擇手動配置。選擇完畢後，Vue CLI 將自動下載所需的依賴並初始化專案。

步驟 4：運行 Vue 專案 專案初始化完成後，切換到專案目錄並運行以下命令：

cd my-vue-project
npm i
npm run dev

這將在本地運行 Vue 專案，並在瀏覽器中打開開發服務器。 至此，你已經成功使用 Vite 建立了一個 Vue 專案，可以開始進行開發工作。

檔案管理

在專案初始化之後，我們來看看 Vue 專案的檔案管理結構。以下是一個典型的 Vue 專案的檔案管理結構：

public：這個目錄包含公共檔案，例如 index.html 是應用程式的主要 HTML 檔案，你可以在這裡放置其他靜態檔案如 favicon 等。

src：這個目錄包含專案的主要源代碼。

assets：這裡放置了應用程式所需的靜態資源，例如圖片、樣式表等。在 Vue 專案中，你可以使用 @ 作為這個目錄的別名，方便引用資源，例如 @/assets/logo.png。

components：這裡放置了專案的 Vue 組件。在這個目錄下，你可以創建各種可重用的 Vue 組件，例如 Header 和 Footer 等。

App.vue：這是專案的根 Vue 組件，它包含了整個應用程式的結構。

main.js：這是應用程式的入口文件，它初始化了 Vue 應用程式並將根 Vue 組件渲染到 HTML 中。 package.json：這個檔案包含了專案的依賴和相關配置信息。 vite.config.js：這是 Vite 的配置檔案，你可以在這裡進行更多的配置，例如自定義別名、設置代理等。