# 第二章：Vue 開發環境設置(使用Vite)

## Node.js 和 npm 安裝

### 安裝 Node.js

1. 訪問 [Node.js 官網](https://nodejs.org/)
2. 下載並安裝 LTS（長期支援）版本
3. 驗證安裝：

   node --version
   npm --version

### npm 配置

1. 設置 npm 鏡像（可選）：

   npm config set registry https://registry.npmmirror.com

2. 常用 npm 命令：

   npm install     # 安裝依賴
   npm run dev     # 運行開發服務器
   npm run build   # 構建生產版本

## 使用 Vite 建立 Vue 3 專案

什麼是 Vite？

Vite 是一個現代化的前端構建工具，它主要包含三個核心功能:

- 作為構建工具,它能夠將你的源代碼轉換和打包成可部署的靜態資源。它支持 TypeScript、JSX、CSS 等多種文件格式的處理。
- 作為開發服務器,它提供了極快的冷啟動速度和即時的熱模塊替換(HMR)功能,大大提升了開發效率。它利用瀏覽器原生 ES 模塊的特性,實現了按需編譯。
- 作為打包工具,它使用 Rollup 進行生產環境的打包,提供了豐富的優化選項,能夠生成高效的生產代碼。同時它也支持多頁應用和庫模式的打包。

### 創建新專案

npm create vite@latest
? Project name: <project-name>
? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Solid
  Qwik
  Angular
  Others
? Select a variant: » - Use arrow-keys. Return to submit.
  TypeScript
  JavaScript
> Customize with create-vue
  Nuxt
? 是否使用TypeScript? >> 否
? 是否啟用JSX? >> 否
? 是否引入Vue Router進行單頁應用程式開發? >> 是
? 是否引入Pinia用於狀態管理? >> 是
? 是否引入Vitest用於單元測試? >> 否
? 是否要引入一款端對端(End to End)測試工具?
> 不需要
  Cypress
  Nightwatch
  Playwright
? 是否引入ESLint用元程式碼品質檢測?
  否
> 是
  是，並同時引入Oxlint以加快檢測(試驗性功能)
? 是否引入Prettier用於程式碼格式化? >> 是

這樣就會在當前目錄下生成一個新的Vue專案。接下來進入專案目錄，安裝套件，並運行開發服務器。

cd <project-name>
npm install
npm run dev

### Vite 的優勢

1. **更快的開發服務器啟動**
2. **即時模塊熱更新（HMR）**
3. **優化的構建過程**
4. **現代化的開發體驗**

## 專案目錄結構說明

my-vue-app/
├── public/            # 靜態資源目錄
├── src/               # 源代碼目錄
│   ├── assets/        # 資源文件
│   ├── components/    # 組件目錄
│   ├── App.vue        # 主組件
│   ├── router/        # 路由配置
│   ├── store/         # 狀態管理
│   ├── views/         # 視圖文件
│   └── App.vue        # 主組件
│   └── main.js        # 入口文件
├── index.html         # HTML 模板
├── package.json       # 項目配置文件
├── vite.config.js     # Vite 配置文件
└── README.md          # 項目說明文件

### 重要文件說明

1. **package.json**

node 項目配置文件，包含項目依賴、腳本命令、項目信息等。

2. **vite.config.js**

Vite 配置文件，用於定義構建和開發服務器的配置。

3. **main.js**

Vue 應用入口文件，用於創建 Vue 實例並掛載到 DOM 上。

4. **App.vue**

Vue 主組件，包含模板、腳本和樣式。

   <template>
     <div>
       <h1>Hello Vue 3</h1>
     </div>
   </template>

   <script setup>
   // 組件邏輯
   </script>

   <style>
   /* 樣式 */
   </style>

## 開發工具配置

### VS Code 推薦擴展

1. **TypeScript Vue Plugin (Volar)**
2. **ESLint**
3. **Prettier**
4. **Vue DevTools**
5. **Vue Language Features (Volar)**
6. **Vue VSCode Snippets**
7. **Vue 3 Snippets**
8. **Vue 3 Language Features (Volar)**

## 補充：其他

1. **使用版本控制**

   git init
   git add .
   git commit -m "Initial commit"

2. **環境變量配置**

- 創建 .env 文件
- 區分開發/生產環境

## 下一步

1. 熟悉基本的 Vue 3 語法
2. 練習創建簡單組件
3. 探索 Vite 的更多功能
4. 閱讀 Vue 3 官方文檔