一、Vue 3 簡介
Vue.js 是一款流行的 JavaScript 前端框架，用于構建用戶界面。Vue 3 作為其最新版本，帶來了諸多令人矚目的新特性與性能優化，為開發者打造了更為高效、靈活的開發體驗。
1.1 Vue 3 的優勢
- 性能提升：對虛擬 DOM 進行了重構，優化了編譯器和運行時性能，在大型應用中渲染速度大幅提升。同時支持 Tree - Shaking，有效減小了打包體積。
- API 革新：引入全新的 Composition API，使開發者能夠以更靈活、可復用的方式組織邏輯，顯著提升代碼的可讀性與維護性。
- 更好的 TypeScript 支持：增強了類型推斷能力，與 TypeScript 兼容性更佳，為使用 TypeScript 進行開發的項目提供了更友好的環境。
1.2 Vue 3 與 Vue 2 的區別
- 響應式系統：Vue 2 使用 Object.defineProperty 來實現響應式，而 Vue 3 采用 ES6 的 Proxy 對象。Proxy 能更高效且完整地進行對象代理，可深度監聽對象變化，包括屬性的添加和刪除。
- API 風格：Vue 2 主要采用選項式 API（Options API），而 Vue 3 引入的組合式 API（Composition API）提供了一種全新的組織代碼邏輯的方式，更便于邏輯復用，尤其適用于大型應用中組件間的狀態管理和邏輯共享。
- 生命周期鉤子：Vue 3 中生命周期鉤子名稱前綴增加了 on，例如 onMounted，并且在 Composition API 中以函數形式使用，需要導入對應的生命周期鉤子。同時，Vue 3 移除了 beforeDestroy，改為 onBeforeUnmount，新增了 unmounted 對應 Vue 2 的 destroyed 鉤子。
二、環境搭建
在開始使用 Vue 3 進行開發之前，我們需要先搭建好開發環境。主要包括安裝 Node.js 和創建 Vue 項目。
2.1 安裝 Node.js
Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行時環境，它允許我們在服務器端運行 JavaScript 代碼。Vue 項目的創建和運行依賴于 Node.js。
前往 Node.js 官方網站 下載并安裝適合你操作系統的版本。安裝完成后，打開終端或命令提示符，輸入以下命令檢查是否安裝成功：
node -vnpm -v這兩條命令會分別顯示 Node.js 和 npm（Node.js 的包管理器）的版本號。如果成功顯示版本號，則說明安裝成功。
2.2 創建 Vue 項目
2.2.1 使用 create - vue 創建項目
create - vue 是 Vue 官方新的腳手架工具，底層基于 vite（下一代前端工具鏈），能為開發提供極速響應。
確保你已經安裝了 16.0 或更高版本的 Node.js。打開終端，進入你想要創建項目的目錄，執行以下命令：
npm create vue@latest執行該命令后，會出現一系列交互式選項：
- 請輸入項目名稱：輸入你想要的項目名稱，例如 my - vue3 - project。
- 是否使用 TypeScript 語法：如果你熟悉 TypeScript 或者項目需要，可以選擇 Yes，否則選擇 No。
- 是否啟用 JSX 支持：如果項目中需要使用 JSX 語法（一種類似 XML 的 JavaScript 擴展語法），選擇 Yes，否則選擇 No。
- 是否引入 Vue Router 進行單頁面應用開發：如果項目需要路由功能（例如實現頁面之間的跳轉），選擇 Yes，否則選擇 No。
- 是否引入 Pinia 用于狀態管理：如果項目需要進行狀態管理（例如管理全局狀態），選擇 Yes，否則選擇 No。
- 是否引入 Vitest 用于單元測試：如果項目需要進行單元測試，選擇 Yes，否則選擇 No。
- 是否要引入一款端到端（End to End）測試工具：根據項目測試需求選擇是否引入端到端測試工具。
- 是否引入 ESLint 用于代碼質量檢測：如果希望對代碼進行質量檢測和規范，選擇 Yes，否則選擇 No。
按照需求選擇完成后，等待項目創建完成。創建完成后，進入項目目錄：
cd my - vue3 - project然后安裝項目依賴：
npm install最后，啟動項目：
npm run dev啟動成功后，在瀏覽器中訪問 http://localhost:5173/，你將看到 Vue 項目的默認頁面。
2.2.2 使用 Vue CLI 創建項目（了解）
Vue CLI 是 Vue.js 官方的腳手架工具，雖然 create - vue 是官方新推薦的方式，但 Vue CLI 仍然被廣泛使用。如果你之前安裝過舊版本的 Vue CLI，可能需要先卸載：
npm uninstall -g vue - cli然后全局安裝 Vue CLI：
npm install -g @vue/cli安裝完成后，在終端進入你想要創建項目的目錄，執行以下命令創建一個新的 Vue 3 項目：
vue create my - vue3 - project在創建過程中，你可以選擇默認的配置（babel、eslint 等），也可以手動選擇需要的特性，如 Vue Router（路由管理）、Vuex（狀態管理）等。創建完成后，同樣進入項目目錄，安裝依賴并啟動項目：
cd my - vue3 - project
npm install
npm run serve啟動成功后，在瀏覽器中訪問 http://localhost:8080/，即可看到項目頁面。
2.3 Vue 3 項目結構
以使用 create - vue 創建的項目為例，其目錄結構大致如下：
my - vue3 - project/├── node_modules/ # 項目依賴的第三方包
├── public/ # 公共靜態資源
│ ├── assets/ # 靜態資源，如圖片、字體等
│ ├── index.html # 應用的 HTML 模板
├── src/ # 項目源代碼
│ ├── assets/ # 項目內的靜態資源
│ ├── components/ # 組件目錄
│ │ ├── HelloWorld.vue # 示例組件
│ ├── main.js # 入口文件，初始化 Vue 實例
│ ├── App.vue # 根組件
├── package.json # 項目依賴和配置
├── package - lock.json # 精確鎖定項目依賴版本的文件
├── tsconfig.json # TypeScript 配置（如果使用 TypeScript）
├── vite.config.ts # Vite 配置文件（如果使用 Vite）
- public 目錄：用于存放公共靜態資源，如 index.html 是項目的入口 HTML 文件，該目錄下的資源會直接被復制到最終的打包目錄中。
- src 目錄：是項目的源代碼目錄，所有的 Vue 組件、JavaScript 邏輯、樣式等主要代碼都存放在此目錄下。
-
- assets 目錄：用于存放項目內的靜態資源，如圖片、樣式文件等。
-
- components 目錄：用于存放 Vue 組件，每個組件通常是一個 .vue 文件，一個 Vue 項目由多個組件組合而成。
-
- main.js：項目的入口文件，在該文件中創建 Vue 應用實例，并進行一些全局配置，例如掛載根組件、注冊全局組件、引入路由和狀態管理等（如果項目使用了這些功能）。
-
- App.vue：項目的根組件，整個應用的結構和樣式通常從這個組件開始構建，其他組件會被引入到該組件中進行組合。
- package.json：記錄了項目的依賴包信息以及一些腳本命令，通過 npm install 命令會根據此文件安裝項目所需的依賴包。
- package - lock.json：用于精確鎖定項目依賴包的版本，確保在不同環境下安裝的依賴包版本一致。
- tsconfig.json：如果項目使用了 TypeScript，該文件用于配置 TypeScript 的編譯選項。
- vite.config.ts：如果項目使用了 Vite 構建工具，該文件用于配置 Vite 的相關選項，例如自定義別名、配置代理等。
了解項目結構有助于我們更好地組織和管理代碼，在后續開發中能夠快速找到對應的文件和邏輯。
)
