一個典型的 Vue 專案結構由多個文件和文件夾組成，它們一起定義了應用的組件、路由、狀態管理、樣式等。Vue 3 使用 Vue CLI 或 Vite 等工具來生成專案模板。下面就來介紹一個標準 Vue 專案的結構及其各部分的作用。

標準Vue專案結構

├── node_modules/      # npm 安裝的第三方依賴包
├── public/            # 靜態資源，如 index.html
│   └── index.html     # 應用的入口 HTML 文件
├── src/               # 源代碼目錄
│   ├── assets/        # 靜態資源（圖片、字體等）
│   ├── components/    # Vue 組件
│   ├── router/        # 路由配置
│   ├── store/         # Vuex 狀態管理
│   ├── views/         # 頁面級組件
│   ├── App.vue        # 根組件
│   ├── main.js        # 應用入口 JS 文件
│   └── styles/        # 全局樣式文件（如 SCSS、CSS）
├── .gitignore         # Git 忽略的文件配置
├── babel.config.js    # Babel 編譯配置
├── package.json       # 專案依賴和腳本
├── README.md          # 專案簡介
└── vue.config.js      # Vue CLI 配置文件

主要文件和文件夾介紹

1. node_modules/

• 包含通過 npm 安裝的所有第三方依賴包。這些依賴項定義在 package.json 文件中。

2. public/

• 用於存放靜態資源，該目錄下的文件不會被 Webpack 處理，會直接拷貝到構建目錄中。
• index.html 是應用的入口文件。這是 Vue 應用嵌入的地方，Vue 最終會掛載在這個文件中的一個元素（如 ）上。

3. src/

• assets/：包含靜態資源，如圖像、字體、圖標等。這些文件會通過 Webpack 處理，可以直接通過相對路徑在組件中引入。

• components/：該文件夾存放 Vue 組件。組件是一個應用的可重用部分。每個組件通常是一個獨立的 .vue 文件，包含模板（HTML）、腳本（JavaScript/TypeScript）和樣式（CSS/SCSS）。組件文件通常遵循 PascalCase 命名法，例如 MyComponent.vue。

• router/：存放 Vue Router 的配置文件，負責應用的頁面導航。通常會有一個 index.js 文件來定義路由規則，例如各個頁面對應的路徑、組件和其他路由相關的設置。

• store/：當使用 Vuex 進行全局狀態管理時，這裡會存放 Vuex 的狀態、變量、行為等。常見的結構有 actions.js、mutations.js 和 state.js 等文件，負責處理應用程序中的狀態管理。

• views/：頁面級組件，也稱為視圖。這些通常是通過路由系統展示的頁面級組件。每個視圖可能包含多個子組件。

• App.vue：應用的根組件。它通常包含應用的基本結構和其他組件的入口點。App.vue 是 Vue 應用中的核心文件之一。

• main.js：Vue 應用的入口文件。在這裡，Vue 應用被創建並掛載到 DOM 中，並且配置了路由和全局設置。

• styles/：用於存放全局樣式文件，例如通用的 SCSS 或 CSS 樣式，可以在應用中全局引用。

4. .gitignore

• 配置 Git 忽略的文件或目錄，常見的例子包括 node_modules/、.env 文件等。

5. babel.config.js

• Babel 是一個 JavaScript 編譯器，用於將現代 JavaScript 轉換為向後兼容的版本。該文件是 Babel 的配置文件，確保應用能在舊版瀏覽器中正常運行。

6. package.json

• 定義了專案的元數據、依賴項和腳本。開發者可以通過 npm install 安裝這些依賴項。這個文件還包含專案的基本信息，例如名稱、版本號、腳本等。

7. README.md

• 該文件包含專案的基本信息和說明文檔，通常包括如何運行、構建和使用該專案的指南。

8. vue.config.js

• Vue CLI 的配置文件，允許開發者自定義 Webpack、開發服務器等配置。可以用來設置不同的路徑、代理或編譯選項。

.vue檔案介紹

.vue 文件是 Vue.js 框架中的單文件組件 (Single File Component, SFC)，它將 HTML 模板、JavaScript 邏輯以及 CSS 樣式集中在一個文件中，使得組件的開發、維護變得更加方便和模塊化。
每一個.vue文件都有三個部分組成:、和、。

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: blue;
}
</style>

1.
功能：定義組件的 HTML 結構。
語法：在 標籤內編寫的內容使用標準的 HTML 語法，同時可以結合 Vue 提供的模板語法進行數據綁定、條件渲染、迭代渲染等操作。

功能：定義組件的邏輯和數據部分，通常是 JavaScript 或 TypeScript 代碼。這一部分負責處理組件的狀態、行為以及生命周期。
語法：在 標籤內編寫的內容可以是標準的 JavaScript 語法，並使用 Vue 提供的 API（如 data、methods、computed、watch 等）來管理組件的邏輯。

功能：定義組件的樣式部分，使用標準的 CSS 語法來控制組件的樣式。可以將樣式作用於整個組件，也可以通過 scoped 屬性使樣式只作用於當前組件，避免樣式污染其他組件。
語法：在 標籤內編寫 CSS 樣式，也可以使用預處理器如 SCSS 或 LESS。