以下是使用 **Vite + Vue 3** 建立專案後，常見的資料夾結構： ```text my-vue-app/ ├─ public/ │ └─ favicon.ico ├─ src/ │ ├─ assets/ │ │ └─ vue.svg │ ├─ components/ │ │ └─ HelloWorld.vue │ ├─ App.vue │ ├─ main.js │ └─ style.css ├─ index.html ├─ package.json ├─ package-lock.json ├─ vite.config.js ├─ jsconfig.json # JavaScript 專案可能存在 └─ README.md ``` ## 1. `public/` 存放不需要經過 Vite 編譯處理的靜態檔案。 ```text public/ ├─ favicon.ico ├─ robots.txt └─ images/ └─ logo.png ``` 在程式中可以使用根目錄路徑存取： ```html <img src="/images/logo.png" /> ``` ### 特點 - 檔案會原樣複製到建置結果 - 不會經過打包、壓縮或 hash 處理 - 適合放 favicon、robots.txt、固定圖片等 --- ## 2. `src/` 主要的前端程式碼都放在這裡。 通常會包含： ```text src/ ├─ assets/ ├─ components/ ├─ views/ ├─ router/ ├─ stores/ ├─ composables/ ├─ App.vue ├─ main.js └─ style.css ``` --- ## 3. `src/assets/` 放需要被 Vite 處理的資源，例如： - 圖片 - CSS - SCSS - SVG - 字型 ```text src/assets/ ├─ images/ │ └─ banner.png ├─ styles/ │ ├─ variables.scss │ └─ main.scss └─ logo.svg ``` 在 Vue 或 JavaScript 中通常使用 `import`： ```vue <script setup> import logo from '@/assets/logo.svg' </script> <template> <img :src="logo" alt="Logo" /> </template> ``` ### `public/` 與 `src/assets/` 的差異 | 項目 | `public/` | `src/assets/` | |---|---|---| | 是否經過 Vite 處理 | 否 | 是 | | 使用方式 | `/image.png` | `import image from ...` | | 適合內容 | 固定路徑、公開檔案 | 專案內使用的圖片、樣式 | | 建置時是否可能產生 hash | 通常不會 | 通常會 | --- ## 4. `src/components/` 放可重複使用的 Vue 元件。 例如： ```text src/components/ ├─ BaseButton.vue ├─ AppHeader.vue ├─ AppFooter.vue └─ UserCard.vue ``` 元件範例： ```vue <!-- src/components/BaseButton.vue --> <template> <button class="base-button"> <slot /> </button> </template> ``` 在其他元件中使用： ```vue <script setup> import BaseButton from './components/BaseButton.vue' </script> <template> <BaseButton>送出</BaseButton> </template> ``` --- ## 5. `src/App.vue` 根元件，也可以視為整個 Vue 應用程式的主要入口畫面。 ```vue <script setup> import AppHeader from './components/AppHeader.vue' </script> <template> <AppHeader /> <main> <h1>首頁</h1> </main> </template> ``` 如果使用 Vue Router，`App.vue` 通常會放： ```vue <template> <AppHeader /> <RouterView /> </template> ``` `RouterView` 會根據網址顯示不同頁面。 --- ## 6. `src/main.js` Vue 應用程式的 JavaScript 入口點，主要負責： 1. 建立 Vue App 2. 載入根元件 3. 載入全域 CSS 4. 註冊 Router、Pinia 等外掛 5. 將 App 掛載到 HTML 基本範例： ```js import { createApp } from 'vue' import './style.css' import App from './App.vue' createApp(App).mount('#app') ``` 如果使用 Router 和 Pinia： ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' import './style.css' const app = createApp(App) app.use(router) app.use(createPinia()) app.mount('#app') ``` --- ## 7. `src/style.css` 全域樣式檔案。 適合放： - CSS reset - 全域字型 - CSS 變數 - 全域背景色 - 共用樣式 例如： ```css :root { font-family: Arial, sans-serif; color: #333; } body { margin: 0; } ``` 也可以依需求改成： ```text src/styles/ ├─ reset.css ├─ variables.css ├─ global.css └─ main.scss ``` --- ## 8. `src/views/` 這個資料夾不是 Vite 預設一定會建立，但使用 Vue Router 時很常見。 `views` 通常代表頁面元件： ```text src/views/ ├─ HomeView.vue ├─ AboutView.vue ├─ LoginView.vue └─ UserView.vue ``` 和 `components/` 的差別： - `components/`：可重複使用的區塊 - `views/`：對應一個路由或頁面 例如： ```vue <!-- src/views/HomeView.vue --> <template> <section> <h1>首頁</h1> <UserCard /> </section> </template> ``` --- ## 9. `src/router/` 使用 Vue Router 時，用來設定路由。 ```text src/router/ └─ index.js ``` 範例： ```js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' import AboutView from '@/views/AboutView.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: AboutView } ] }) export default router ``` --- ## 10. `src/stores/` 使用 Pinia 管理全域狀態時使用。 ```text src/stores/ ├─ user.js ├─ cart.js └─ counter.js ``` 範例： ```js import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ name: '', isLoggedIn: false }), actions: { login(name) { this.name = name this.isLoggedIn = true } } }) ``` --- ## 11. `src/composables/` 放 Vue Composition API 中可重複使用的邏輯，通常以 `use` 開頭命名。 ```text src/composables/ ├─ useFetch.js ├─ useAuth.js └─ useWindowSize.js ``` 範例： ```js import { ref } from 'vue' export function useCounter() { const count = ref(0) function increment() { count.value++ } return { count, increment } } ``` 這類檔案適合抽離： - API 請求邏輯 - 表單處理 - 權限判斷 - 瀏覽器尺寸監聽 - Loading、錯誤狀態管理 --- ## 12. `index.html` Vite 專案的 HTML 入口檔案，位於專案根目錄，不是在 `public/` 裡。 ```html <!doctype html> <html lang="zh-Hant"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 其中： ```html <div id="app"></div> ``` 會對應到： ```js createApp(App).mount('#app') ``` --- ## 13. `package.json` 定義專案資訊、套件依賴與指令。 ```json { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.0.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.0", "vite": "^5.0.0" } } ``` 常用指令： ```bash npm run dev npm run build npm run preview ``` --- ## 14. `vite.config.js` Vite 的設定檔，例如： - Vue Plugin - 路徑別名 - 開發伺服器設定 - Proxy - 打包設定 ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { fileURLToPath, URL } from 'node:url' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { port: 5173 } }) ``` 設定後可以使用： ```js import AppHeader from '@/components/AppHeader.vue' ``` 而不用寫： ```js import AppHeader from '../../components/AppHeader.vue' ``` --- ## 實務上常見的完整結構 中小型 Vue 專案可以採用： ```text src/ ├─ assets/ │ ├─ images/ │ └─ styles/ ├─ components/ │ ├─ common/ │ └─ layout/ ├─ composables/ ├─ router/ │ └─ index.js ├─ stores/ ├─ utils/ ├─ services/ │ └─ api.js ├─ views/ │ ├─ HomeView.vue │ ├─ LoginView.vue │ └─ DashboardView.vue ├─ App.vue ├─ main.js └─ style.css ``` 其中： - `components/`：可重複使用的 UI 元件 - `views/`：頁面 - `router/`：路由 - `stores/`：全域狀態 - `composables/`：可重複使用的 Composition API 邏輯 - `services/`：API 或外部服務 - `utils/`：工具函式 - `assets/`：經過打包處理的靜態資源 簡單來說，Vite Vue 專案可以把責任分成： ```text 頁面 → views 元件 → components 狀態 → stores 路由 → router 共用邏輯 → composables API → services 工具函式 → utils 圖片與樣式 → assets ``` Vite 本身主要負責開發伺服器與建置打包，而 Vue 則負責元件化的前端介面。