Development Environment Setup

This guide provides detailed instructions on how to set up a uni-app development environment, including development tools installation and configuration.

Development Tool Selection

💡 Recommended: Use HBuilderX as Development Tool

HBuilderX is an IDE designed specifically for uni-app by DCloud, providing rich visual operations and debugging features.

Development Tools Comparison

Development Tool	Advantages	Disadvantages	Suitable For
HBuilderX	Built-in uni-app support, visual operations, convenient debugging, fast execution	Some advanced features require payment	All developers, especially beginners
VS Code + Plugins	Rich ecosystem, strong extensibility, high customization	Requires additional configuration, debugging not as convenient as HBuilderX	Developers with VS Code experience
Command Line + Editor	High flexibility, suitable for automation workflows	High learning curve, requires more configuration	Developers with extensive development experience

HBuilderX Installation and Configuration

Download and Installation

Follow these steps to install HBuilderX:

1. Visit Official Website - Go to https://www.dcloud.io/hbuilderx.html
2. Select Version - Recommended to download App Development Edition, supports uni-app development
3. Install Software - Double-click the installation package after download

Version Selection

Version Type	Features	Use Case	Recommendation
Standard Edition	Lightweight editor, suitable for Web development	Web project development	⭐⭐⭐
App Development Edition 🌟	Integrated App development environment, supports uni-app	uni-app project development	⭐⭐⭐⭐⭐

Plugin Installation

HBuilderX extends functionality through plugins. The following plugins are needed for uni-app development:

Essential Plugins

• ✅ uni-app Compilation - Essential plugin for uni-app
• ✅ App Real Device Running - For App development and debugging

Recommended Plugins

• 🌐 Built-in Browser - For H5 preview
• 🎨 scss/sass Compilation - For style development
• 📝 eslint-js - Code standard checking
• ✨ prettier - Code formatting

Development Environment Configuration

Editor Settings

1. Open HBuilderX, click menu Tools -> Settings
2. Configure editor font, theme, indentation, etc.
3. Recommended to enable "Auto format on save" option

Runtime Environment Configuration

1. Click menu Tools -> Settings -> Run Configuration
2. Configure browser path, simulator path, etc.
3. Set default runtime environment

Git Configuration

1. Click menu Tools -> Settings -> Git Configuration
2. Set Git path and user information
3. Enable Git integration features

Command Line Tools Installation

If you prefer command line development, follow these steps to install uni-app command line tools:

Install Node.js

Step 1: Download Node.js

Visit Node.js Official Website to download the Long Term Support (LTS) version

Step 2: Install Node.js

Double-click the installation package and follow the prompts to complete installation

Step 3: Verify Installation

Open command line tool and enter the following commands to check if installation was successful:

node -v
npm -v

Install Vue CLI

# Install Vue CLI globally
npm install -g @vue/cli

# Verify installation
vue --version

Install uni-app Template

# Create uni-app project
vue create -p dcloudio/uni-preset-vue my-project

# Select template type
# Choose default template (Vue2) or Vue3/TypeScript template

Development Environment Requirements

System Requirements

Item	Requirement
Operating System	Windows 7 and above / macOS 10.13 and above / Linux
Memory	Recommended 8GB and above
Storage Space	At least 10GB available space
Node.js Version	12.0.0 and above

Simulator Installation

Android Simulator

Android Studio Simulator

1. Download and install Android Studio
2. Open Android Studio, click Tools -> AVD Manager
3. Click Create Virtual Device, select device model and system version
4. After creation, you can select this simulator in HBuilderX to run projects

iOS Simulator (macOS Only)

1. Download and install Xcode
2. Open Xcode, click Xcode -> Preferences -> Components
3. Download required iOS simulator versions
4. You can select iOS simulator in HBuilderX to run projects

Real Device Debugging Configuration

Android Real Device Debugging

1. Enable USB Debugging - Find Developer Options in phone settings and enable USB debugging
2. Install Drivers - Ensure computer has installed USB drivers for the corresponding phone brand
3. Connect Device - Use USB cable to connect phone and computer
4. Run Project - Select the connected device in HBuilderX to run project

iOS Real Device Debugging

⚠️ Note: iOS real device debugging requires Apple Developer Account

iOS real device debugging requires Apple Developer Account and certificate configuration. Personal development can use free developer account, but with some limitations.

1. Register Developer Account - Visit Apple Developer website to register account
2. Install Xcode - Install Xcode on Mac computer
3. Configure Certificates - Configure development certificates and provisioning profiles in Xcode
4. Connect Device - Use USB cable to connect iPhone and Mac computer
5. Run Project - Select the connected device in HBuilderX to run project

Common Issues

HBuilderX Cannot Start

Solutions:

1. Check if antivirus software is blocking
2. Try running as administrator
3. Re-download and install the latest version

Plugin Installation Failed

Solutions:

1. Check network connection
2. Try switching plugin server
3. Close HBuilderX and reopen, then install again

Real Device Debugging Connection Failed

Solutions:

1. Check if USB cable is working properly
2. Confirm phone has USB debugging enabled
3. Reinstall phone drivers
4. Try restarting phone and computer

Next Steps

After completing development environment setup, you can continue learning:

Learning Content	Description	Link
Project Structure Details	Deep dive into uni-app project file structure	View Details
Lifecycle	Learn about uni-app application and page lifecycle	View Details
Basic Components	Understand how to use uni-app basic components	View Details

---

Related Links:

• HBuilderX Official Website
• Node.js Official Website
• Android Studio
• Xcode