以Vite建立的Vue專案結構
透過Vite建立專案之後，目錄會因為選擇不同的套件而有些許不同，在本次我們選擇了以下套件：
- Vue Router : VueJS 官方的前端路由套件，建議安裝
- Pinia : 狀態管理器，可安裝
- Vitest : 單元測試框架
- Cypress : E2E測試框架
- ESLint : 程式碼格式檢查(通常會裝)
- Prettier : 格式化程式碼
(原則上都選了)
cypress
E2E測試框架的資料夾，如果沒安裝就不會出現。
vite.config.js
Vite 的設定檔，每次執行有關 vite 的指令時(如啟動開發伺服器npm run dev、打包等)都會被 vite 讀取， Vite 會依據設定而執行。
其原始設定如下：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})路徑別名：在 alias 的地方，預設已經定義好 ./src 的路徑別名為 "@"，在 import 檔案的時候可以直接使用 "@"代替 "./src"。
index.html
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>這支檔案作為 JS 載入的進入點，預設載入 src/main.js。
src
src 是放置程式碼的主要地方，底下還包含許多資料夾。
src/App.vue
整個網頁的根元件，通常也只會有一個。
src/main.js
專案程式的進入點，這裡會 createApp 建立 Vue 的實體，並透過 app.mount 方法渲染至 index.html 中的 #app div。也會在這裡載入一些套件，例如 router、pinia 等。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')src/assets
放置靜態資源的地方，如CSS、圖片等
src/components
放置元件檔。
src/stores
Pinia 放置狀態管理器有關檔案的地方
src/router
放置 VueRouter 有關檔案的地方
src/views
放置路由元件的地方，通常為畫面
public
放置不須經過編譯打包檔案的地方，在編譯的時候只會被直接複製，所以這裡的檔案無法被 JS 動態引入。通常放置靜態資源(如ICON等)，而引入時必須直接以目錄的路徑引入。
package.json、package-lock.json
這是由 node 產生的專案設定檔，記錄套件使用的版本。當執行 npm i 的時候預設會依照表列的套件進行安裝。
這裡預設會設定好三個不同的指令，如程式碼所示：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},其中已經執行過 dev，其餘兩個未來有使用到會再提及。
node_modules
node.js 安裝的套件都會放在這裡面，檔案體積通常很大，所以在 git 的時候通常不會 git 這個資料夾。
.gitignore
設定要被 git 忽略的檔案，如 node_modules 或是一些具有機密資訊的 config 檔案。
在開始進入寫程式的環節之前，下一篇先比較一下 vue 的兩大 API ：Option API 和 Composition API。
