無論你是使用 Vite 或者 Vue CLI 產生的 Vue 專案，專案結構都是一致的，只是使用 Vite 構建的 Vue 專案，配置文件名稱為 vite.config.js。而使用 Vue CLI 構建的 Vue 專案，配置文件名稱為 vue.config.js。

使用 Vite 和 Vue CLI 建立出來的 Vue 專案，需要 Node.js 的支持，不能直接運行，可以使用單文件組件，需要啟動 Vue 服務器。

如果只是將 Vue.js 文件通過< script >標記引入 HTML 文件，使用簡單，不能使用單文件組件，不需要啟動 Vue 服務器，直接使用瀏覽器即可運行。

index.html 檔案
Vue 專案的主頁檔案，入口頁面，Vue 是不需要多個*.html 的，組件模組化，只需要一個入口 index.html 檔案即可。

id="app"為應用呈現界面的乘載容器，所有的 HTML 代碼都放在該< div >下面。

main.js 檔案
main.js 為主要配置檔案，將 Vue 專案中需要的所有組件在此檔案中導入。
例如 Vue.js、Bootsrap5.css 等都需要在此檔案中導入。
main.js 是主要的JS程式檔案，核心功能就是針對整個應用進行配置，使應用能運行起來。

若有asp.net core開發經驗的，就類似於 ASP.NET Core 中的 Program.cs 檔案的作用。
Vue 會在後台自動與 index.html 運行，無需手動引入，藉由 createApp 創建一個應用實體，並掛接到 id="app"的 div上。

HelloWorld.vue 檔案

HelloWorld.vue 文件是 Vue CLI專案中預設提供的示範SFC，自定義的組件，開發者後續主要開發的就是自訂的組件。使用時，可將 HelloWorld.vue 導入到 App.vue 中，從而能得到執行。

App.vue 檔案
在 Vue 專案中，*.vue 文件是SFC，而 App.vue 是應用的根組件，用於呈現應用程序的具體內容。
App.vue 會在 main.js 中導入，並掛載到某個 HTML 元素上，從而呈現內容。
前端開發者開發的SFC都會在 App.vue 中導入並渲染。

vue.config.js 或 vite.config.js 檔案
專案的全域配置文件，啟用或關閉一些專案層級功能，如關閉命名拼寫檢查。

本篇已同步發表至個人部落格
https://coolmandiary.blogspot.com/2023/09/2023day-04-clivue.html