開發環境搭建

本文將詳細介紹如何搭建uni-app開發環境，包括開發工具的安裝和配置。

開發工具選擇

💡 推薦使用HBuilderX作為開發工具
HBuilderX是DCloud推出的一款專為uni-app設計的IDE，提供了豐富的可視化操作和除錯功能。

開發工具對比

開發工具	優勢	劣勢	適合人群
HBuilderX	內建uni-app支援，可視化操作，除錯方便，執行快速	部分進階功能需要付費	所有開發者，尤其是初學者
VS Code + 外掛	生態豐富，擴充性強，自訂程度高	需要額外配置，除錯不如HBuilderX方便	有VS Code使用經驗的開發者
命令列 + 編輯器	靈活性高，適合自動化流程	上手難度大，需要更多配置	有豐富開發經驗的開發者

HBuilderX安裝配置

下載安裝

按照以下步驟安裝HBuilderX：

訪問官網 - 開啟 https://www.dcloud.io/hbuilderx.html
選擇版本 - 推薦下載App開發版，支援uni-app開發
安裝軟體 - 下載後雙擊安裝包進行安裝

版本選擇

版本型別	特點	適用場景	推薦度
標準版	輕量編輯器，適合Web開發	Web專案開發	⭐⭐⭐
App開發版 🌟	整合App開發環境，支援uni-app	uni-app專案開發	⭐⭐⭐⭐⭐

安裝外掛

HBuilderX透過外掛擴充功能，uni-app開發需要安裝以下外掛：

必備外掛

✅ uni-app編譯 - uni-app必備外掛
✅ App真機執行 - 用於App開發除錯

基本配置

主題設定

開啟 工具 -> 主題
選擇喜歡的主題（推薦使用深色主題保護眼睛）

字型設定

開啟 工具 -> 設定 -> 編輯器設定
設定合適的字型和大小

程式碼格式化

開啟 工具 -> 設定 -> 程式碼格式化
配置格式化規則

VS Code配置

安裝必要外掛

在VS Code中安裝以下外掛：

bash

# uni-app開發必備外掛
code --install-extension vue.volar
code --install-extension uni-helper.uni-app-snippets
code --install-extension uni-helper.uni-ui-snippets

# 推薦外掛
code --install-extension bradlc.vscode-tailwindcss
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension ms-vscode.vscode-eslint

外掛清單

外掛名稱	功能	必要性
Volar	Vue 3語言支援	⭐⭐⭐⭐⭐
uni-app程式碼片段	uni-app語法提示	⭐⭐⭐⭐⭐
uni-ui程式碼片段	uni-ui元件提示	⭐⭐⭐⭐
ESLint	程式碼質量檢查	⭐⭐⭐⭐
Prettier	程式碼格式化	⭐⭐⭐

工作區設定

建立 .vscode/settings.json 檔案：

json

{
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "typescript.suggest.autoImports": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Node.js環境

版本要求

最低版本：Node.js 14.0.0
推薦版本：Node.js 16.x 或 18.x
LTS版本：推薦使用長期支援版本

安裝方法

Windows系統

訪問 https://nodejs.org/
下載LTS版本安裝包
雙擊安裝，按照嚮導完成安裝
開啟命令提示字元，驗證安裝：

cmd

node --version
npm --version

macOS系統

使用Homebrew安裝：

bash

# 安裝Homebrew（如果未安裝）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安裝Node.js
brew install node

# 驗證安裝
node --version
npm --version

Linux系統

使用包管理器安裝：

bash

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

# 驗證安裝
node --version
npm --version

專案建立

使用HBuilderX建立

開啟HBuilderX
點選 檔案 -> 新建 -> 專案
選擇 uni-app 專案型別
填寫專案名稱和路徑
選擇模板（推薦使用預設模板）
點選建立

使用命令列建立

bash

# 安裝Vue CLI
npm install -g @vue/cli

# 建立uni-app專案
vue create -p dcloudio/uni-preset-vue my-uni-app

# 進入專案目錄
cd my-uni-app

# 安裝依賴
npm install

# 啟動開發伺服器
npm run dev:h5

環境驗證

驗證步驟

Node.js環境

bash

node --version  # 應該顯示版本號
npm --version   # 應該顯示版本號

開發工具

HBuilderX：能夠正常開啟和建立專案
VS Code：能夠安裝必要外掛

專案建立

能夠成功建立uni-app專案
能夠啟動開發伺服器
能夠在瀏覽器中預覽

常見問題

Node.js版本過低

bash

# 升級Node.js
# 使用nvm管理Node.js版本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18

許可權問題

bash

# 修復npm全域安裝許可權
npm config set prefix ~/.npm-global
# 將路徑新增到環境變數
export PATH=~/.npm-global/bin:$PATH

網路問題

bash

# 設定淘寶映象源
npm config set registry https://registry.npmmirror.com/

下一步

環境搭建完成後，您可以：

環境搭建完成，開始您的uni-app開發之旅！

開發環境搭建 ​

開發工具選擇 ​

開發工具對比 ​

HBuilderX安裝配置 ​

下載安裝 ​

版本選擇 ​

安裝外掛 ​

必備外掛 ​

推薦外掛 ​

基本配置 ​

主題設定 ​

字型設定 ​

程式碼格式化 ​

VS Code配置 ​

安裝必要外掛 ​

外掛清單 ​

工作區設定 ​

Node.js環境 ​

版本要求 ​

安裝方法 ​

Windows系統 ​

macOS系統 ​

Linux系統 ​

專案建立 ​

使用HBuilderX建立 ​

使用命令列建立 ​

環境驗證 ​

驗證步驟 ​

常見問題 ​

Node.js版本過低 ​

許可權問題 ​

網路問題 ​

下一步 ​

開發環境搭建

開發工具選擇

開發工具對比

HBuilderX安裝配置

下載安裝

版本選擇

安裝外掛

必備外掛

推薦外掛

基本配置

主題設定

字型設定

程式碼格式化

VS Code配置

安裝必要外掛

外掛清單

工作區設定

Node.js環境

版本要求

安裝方法

Windows系統

macOS系統

Linux系統

專案建立

使用HBuilderX建立

使用命令列建立

環境驗證

驗證步驟

常見問題

Node.js版本過低

許可權問題

網路問題

下一步