2025-02-08 01:01:56 +08:00
|
|
|
|
# Node.js 與 npm 簡介
|
2025-02-08 00:53:33 +08:00
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
## Node.js 是什麼？
|
2025-02-08 00:53:33 +08:00
|
|
|
|
Node.js 是一個 **不需要開啟網頁就能執行 JavaScript** 的環境，讓 JavaScript 可以在 **伺服器端運行**，而不只是瀏覽器內使用。
|
|
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
## npm（Node Package Manager）是什麼？
|
2025-02-08 00:53:33 +08:00
|
|
|
|
npm 是 **Node.js 內建的套件管理工具**，類似於 `pip`（Python）或 `NuGet`（C#）。
|
2025-02-08 01:01:56 +08:00
|
|
|
|
它的主要用途包括：
|
2025-02-08 00:53:33 +08:00
|
|
|
|
- **管理 JavaScript 套件**（安裝、更新、移除）
|
|
|
|
|
|
- **處理前端與後端的開發依賴**
|
|
|
|
|
|
- **自動化開發工作（如打包、測試、部署）**
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
## 為什麼使用 React 仍然需要 npm？
|
|
|
|
|
|
npm 本身是 **JavaScript 寫成的工具**，需要 Node.js 在背景執行來處理指令。
|
|
|
|
|
|
雖然 **React 只負責前端開發，不會用到 Node.js**，但仍然需要 npm 來安裝開發工具與相關套件。
|
2025-02-08 00:53:33 +08:00
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
開發 React 項目時，常見的 npm 套件如下：
|
2025-02-08 00:53:33 +08:00
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
### 常用 npm 套件（React 開發必備）
|
2025-02-08 00:53:33 +08:00
|
|
|
|
| **類別** | **套件名稱** | **用途** |
|
|
|
|
|
|
|----------|------------|---------|
|
|
|
|
|
|
| **React 本體** | `react`, `react-dom` | React 組件核心 |
|
|
|
|
|
|
| **開發工具** | `vite`, `webpack` | 開發環境、建置專案 |
|
|
|
|
|
|
| **TypeScript 支援** | `typescript` | 強型別 JavaScript |
|
|
|
|
|
|
| **狀態管理** | `redux`, `zustand` | 管理全域狀態 |
|
|
|
|
|
|
| **UI 框架** | `tailwindcss`, `material-ui` | 美化前端 UI |
|
|
|
|
|
|
| **前端路由** | `react-router-dom` | 處理單頁應用（SPA）導航 |
|
|
|
|
|
|
| **API 請求** | `axios`, `fetch` | 透過 HTTP 取得數據 |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2025-02-08 01:01:56 +08:00
|
|
|
|
## 安裝 Node.js 與 npm
|
|
|
|
|
|
### 1. 下載與安裝 Node.js（自動附帶 npm）
|
|
|
|
|
|
官方下載連結：[Node.js 官網](https://nodejs.org/)（建議下載 LTS 版本）
|
2025-02-08 00:53:33 +08:00
|
|
|
|
|
2025-02-08 01:05:11 +08:00
|
|
|
|
### 2. 在Vscode終端檢查安裝是否成功
|
2025-02-08 01:01:56 +08:00
|
|
|
|
```
|
2025-02-08 00:53:33 +08:00
|
|
|
|
node -v # 檢查 Node.js 版本
|
|
|
|
|
|
npm -v # 檢查 npm 版本
|
2025-02-08 00:42:09 +08:00
|
|
|
|
```
|
2025-02-08 01:05:11 +08:00
|
|
|
|
### 3. 如果遇到無法使用npm指令?
|
|
|
|
|
|
|
2025-02-08 01:13:26 +08:00
|
|
|
|
#### a.在「開始功能表」搜尋 PowerShell
|
|
|
|
|
|
#### b.右鍵「以系統管理員身份執行」
|
|
|
|
|
|
```
|
|
|
|
|
|
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
|
|
|
|
|
|
```
|
|
|
|
|
|
```
|
|
|
|
|
|
Y
|
2025-02-08 01:28:28 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
# Vite
|
|
|
|
|
|
|
|
|
|
|
|
## 什麼是 Vite？
|
|
|
|
|
|
Vite 是一個 **現代化的前端開發工具**，主要用於快速建立與運行 **React、Vue、Svelte、Solid.js 等前端框架**。
|
|
|
|
|
|
它的核心目標是 **提供極速的開發體驗**，比傳統的 Webpack 快 10 倍以上。
|
|
|
|
|
|
|
|
|
|
|
|
### 使用Vite創建專案
|
|
|
|
|
|
#### React（JavaScript）
|
|
|
|
|
|
```
|
|
|
|
|
|
npm create vite@latest my-react-app --template react
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
#### React（TypeScript）
|
|
|
|
|
|
```
|
|
|
|
|
|
npm create vite@latest my-react-app --template react-ts
|
|
|
|
|
|
```
|
|
|
|
|
|
#### Vue 3（JavaScript）
|
|
|
|
|
|
```
|
|
|
|
|
|
npm create vite@latest my-vue-app --template vue
|
|
|
|
|
|
```
|
|
|
|
|
|
#### Vue 3（TypeScript）
|
|
|
|
|
|
```
|
|
|
|
|
|
npm create vite@latest my-vue-app --template vue-ts
|
|
|
|
|
|
|
2025-02-08 01:13:26 +08:00
|
|
|
|
```
|
