前一篇文章，我們已經把 Vue 給安裝起來了，接下來我們就要開始介紹 Vue 的檔案結構以及程式碼結構。那我們廢話就不多說了，開始吧！

檔案結構介紹

我們在寫 Vue + Vite 的時候，首先要介紹它的檔案結構。了解檔案結構可以讓我們更快速地去知道該如何去開發。
首先我們可以在終端機輸入：tree來查看目前的檔案結構，沒意外的話可以看到下面這種結構。

.
└── vite-project
    ├── index.html
    ├── node_modules
    │   ├── @vitejs
    │   │   └── plugin-vue -> ../.pnpm/@vitejs+plugin-vue@6.0.1_vite@7.1.6_vue@3.5.21_typescript@5.8.3_/node_modules/@vitejs/plugin-vue
    │   ├── @vue
    │   │   └── tsconfig -> ../.pnpm/@vue+tsconfig@0.8.1_typescript@5.8.3_vue@3.5.21_typescript@5.8.3_/node_modules/@vue/tsconfig
    │   ├── typescript -> .pnpm/typescript@5.8.3/node_modules/typescript
    │   ├── vite -> .pnpm/vite@7.1.6/node_modules/vite
    │   ├── vue -> .pnpm/vue@3.5.21_typescript@5.8.3/node_modules/vue
    │   └── vue-tsc -> .pnpm/vue-tsc@3.0.7_typescript@5.8.3/node_modules/vue-tsc
    ├── package.json
    ├── pnpm-lock.yaml
    ├── public
    │   └── vite.svg
    ├── README.md
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── vue.svg
    │   ├── components
    │   │   └── HelloWorld.vue
    │   ├── main.ts
    │   ├── style.css
    │   └── vite-env.d.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

15 directories, 15 files

首先我們可以看到它是由幾個結構組成的，我們就來一一介紹他吧！

public/ 是什麼？

這裡是用來存放一定要放在網站上面的靜態檔案，這裡的檔案不會被編譯。例如：「網站小圖示、robots.txt、靜態logo、...等」。要使用時，直接用根路徑即可（例如 /image.png 是 http://localhost:5173/image/png）。

src/ 是什麼？

這裡會存放專案的核心程式碼，其實裡面我們還會分類一下，以下我們來解釋一下。

components 是什麼？

這裡面放的就是元件。什麼是元件？你可以想像成網頁上的小積木，例如按鈕、表單、Navbar、Footer 這些東西，都可以做成元件，放在這個資料夾裡。我舉一個例子，例如人體部位，一整個人就是 Vue 的專案，而 components 就是各種各樣的器官，例如我有一個器官叫做心臟，而這個心臟的 component 有「左心室.vue、右心室.vue、大動脈.vue、...」。因此檔案結構會長這樣：

components/心臟/左心室.vue
components/心臟/右心室.vue
components/心臟/左心房.vue
components/心臟/右心房.vue
components/腸子/大腸.vue
components/腸子/小腸.vue

而我們在 src/App.vue 裡面會匯入（import）這些components，所以讀者可以把 App.vue 想像成我們的腦袋，他會血管連接到其他器官。因此我們可以把 import 想像成這是血管，將器官的營養輸送到大腦。

assets 是什麼？

assets 的資料夾呢，讀者可以把這個資料夾想像成這個人的衣服、褲子、帽子、...等等的。我們可以將圖片、影片、...等，放入這個資料夾，然後在 vue 檔案裡面匯入，此時這個檔案會被 vite 編譯。而 assets 與 public 的差別在於：assets 走「import 進來、會被編譯」，public 則是「不經編譯、原封不動提供」。而我自己還會區分成 assets/images、assets/videos、...等。

styles 是什麼？

styles/ 這個資料夾可以想像成人的外觀，例如臉型、身高、體重、...等。我們在建立一個網站的時候，一定會調整標題顏色、大小，或做 RWD。

types 是什麼？

types 讀者可以想像成，一個人他該擁有什麼樣的「屬性」或是「這個世界的資料長相規格」，我們直接上範例：

interface Human { // 定義「人類」的介面
  tall: number; // 身高 屬性
  weight: number; // 體重 屬性
  gender: string; // 性別 屬性
  birthday: string; // 生日 屬性
}

我先定義了一個人類的介面，在這個介面裡面有「身高、體重、性別、生日」屬性，我嗯就可以對著這個屬性去定義 components。在 App.vue 裡面定義了 Andy、Lily 的變數，記載著各自的屬性，透過 Human component實現，而 components/Human/Human.vue 擁有 src/types/Human.ts。

我該怎麼改網站小圖示（icon）?

讀者可以在 public/ 新增一個檔案為 favicon.ico，等待編譯完成即可看到網站小圖示已經套用。

Vue 程式碼結構

我們知道了檔案結構之後呢，我們就要開始來認識程式碼結構了。在 Vue 當中，是以 .vue 結尾當作程式碼檔案。網站進入點是 /index.html，接著由 src/main.ts 把 App.vue 掛載進去。

template 標籤

讀者可以點進去 App.vue，可以看到以下結構

<template>
  <h1>{{ title }}</h1>
</template>

template 這個標籤，是放網頁的結構，也就是 render 出來的畫面會放置在這裡。有寫過純前端(html)網頁的應該不難理解，這就是撰寫 HTML 的地方。而中間的{{title}}我們稍微會講到，先姑且知道他是大標題即可。

script 標籤

往底下看，可以看到一個 script 區塊：

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('hello, 鐵人賽')
</script>

而我們先定義了一個變數名為 title，其存放的值是「hello, 鐵人賽」。而這個變數會經由 ref，而從 template 調用，進而顯示在網頁上。可以知道 script 這個標籤，是邏輯結構，也就是我們寫 TypeScript 的地方。

style 標籤

而 style 呢，剛剛有說到就是幫網頁「訂外觀」。目前網頁只有大標題，因此我們可以寫：

h1 {
  font-size: 28px; // 改變字體大小
  color: black; // 改變字體顏色
  text-align: center; // 置中對齊
}

所以整合之後，我們的 App.vue 檔案就會長這樣：

<template>
  <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('hello, 鐵人賽')
</script>

<style>
h1 {
  font-size: 28px; /* 改變字體大小 */
  color: black; /* 改變字體顏色 */
  text-align: center; /* 置中對齊 */
}
</style>

小小練習：寫一個自己的網頁！

題目：寫一個標題，名為「我愛鐵人賽」，字體32px，紅色字體，向右對齊。且下一行需要有「我熱愛寫 Vue 網頁」，字體24px，向左對齊，藍色字體。

首先，定義 template！

<template>
  <h1>{{ title }}</h1>
  <p>{{ text }}</p>
</template>

其次，定義邏輯區！

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('我愛鐵人賽');
const text = ref('我熱愛寫 Vue 網頁');
</script>

最後，定義外觀！

<style>
h1 {
  font-size: 32px; /* 改變字體大小 */
  color: red; /* 改變字體顏色 */
  text-align: right; /* 置中對齊 */
}

p {
  font-size: 24px;
  color: blue;
  text-align: left;
}
</style>

最後整合

App.vue：

<template>
  <h1>{{ title }}</h1>
  <p>{{ text }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('我愛鐵人賽」');
const text = ref('我熱愛寫 Vue 網頁');
</script>

<style>
h1 {
  font-size: 32px; /* 改變字體大小 */
  color: red; /* 改變字體顏色 */
  text-align: right; /* 置中對齊 */
}

p {
  font-size: 24px;
  color: blue;
  text-align: left;
}
</style>

結語

相信各位看完這些應該都對 Vue 有更深的理解了，知道檔案結構長什麼樣子，也知道該如何寫 Vue 了。那麼下一篇我們來講講什麼是 Components吧！