Install the HBuilderX development tool

Download HBuilderX

HBuilderX is the official uni-app development tool from DCloud, supporting Windows, macOS, and Linux systems. First, download the corresponding installation package from the official website:

• Official download link: https://www.dcloud.io/hbuilderx.html
• Windows users should select the .exe installer
• macOS users should select the .dmg disk image
• Linux users should choose the .AppImage or .deb package

After downloading, Windows users can double-click the installer and follow the wizard to complete the installation; macOS users can drag the application to the Applications folder; Linux users can grant execution permissions to the AppImage file and run it directly.

Initial Setup

When launching HBuilderX for the first time, you will be prompted to perform initial setup:

1. Choose a theme (recommend "Dark" for eye protection)
2. Set the default project storage path
3. Install necessary plugins:
   • Must install the "uni-app Compilation" plugin
   • Recommended to install "ESLint" and "Prettier" for code formatting
4. Configure the node.js path (if already installed)

# Check if node.js is installed successfully
node -v
npm -v

Create a uni-app Project

Create a new project via the top menu:

1. File → New → Project
2. Select the "uni-app" project type
3. Fill in the project name and storage path
4. Choose a template (recommend "Default Template")
5. Click the "Create" button

Project directory structure explanation:

├── pages         # Pages directory
│   └── index     # Homepage
│       ├── index.vue
│       └── index.json
├── static        # Static resources
├── App.vue       # Application entry
└── manifest.json # App configuration

Run and Debug

HBuilderX provides multiple ways to run and debug:

1. Run in Browser: Click "Run" → "Run to Browser" in the toolbar
2. Real Device Debugging:
   • Android: Connect the phone and enable USB debugging
   • iOS: Requires macOS system
3. Emulator Run:
   • Recommended Android emulator: "Nox Player"
   • iOS emulator requires Xcode

Debugging tips:

• Use console.log() to output logs
• View runtime information in the "Debug Console"
• Use the "Element Inspection" feature to examine page structure

// Example: Print current page route
onLoad() {
  console.log('Current page path:', this.$route.path)
}

Common Feature Configuration

Enhanced Code Hinting

1. Install the "Vetur" plugin for better Vue syntax support
2. Configure jsconfig.json for path alias hints:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Shortcut Settings

Recommended shortcut configurations (File → Preferences → Shortcuts):

• Format document: Ctrl+Alt+L
• Quick comment: Ctrl+/
• Rename: F2

Code Snippets

Create custom code snippets to improve efficiency:

1. Tools → Snippet Settings → vue.json
2. Add common templates:

{
  "uni-page": {
    "prefix": "upage",
    "body": [
      "<template>",
      "  <view class=\"container\">",
      "    $1",
      "  </view>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data() {",
      "    return {",
      "      $2",
      "    }",
      "  }",
      "}",
      "</script>",
      "",
      "<style scoped>",
      ".container {",
      "  padding: 20rpx;",
      "}",
      "</style>"
    ]
  }
}

Project Packaging and Release

WeChat Mini Program Packaging

1. Configure the WeChat Mini Program AppID in manifest.json
2. Run → Release → WeChat Mini Program
3. Open the generated dist directory in WeChat Developer Tools

APP Packaging

1. Certificates are required (Android: keystore, iOS: p12)
2. Select "Native APP - Cloud Packaging"
3. Wait for DCloud servers to complete compilation

// Example: Get app version number
plus.runtime.getProperty(plus.runtime.appid, (info) => {
  console.log('Current version:', info.version)
})

Plugin Ecosystem

HBuilderX supports a rich set of plugins:

1. UI Library Plugins:
   • uView UI
   • colorUI
2. Tool Plugins:
   • Git version control
   • Code beautification
3. Debugging Plugins:
   • Network request capture
   • Performance analyzer

Installation method:

• Tools → Plugin Installation
• Search for the desired plugin and click install
• Restart to take effect

Performance Optimization Tips

1. Use "Runtime Compression" to reduce package size
2. Configure "Image Compression" to automatically process static resources
3. Enable "Tree Shaking" to remove unused code
4. Use subpackage loading for large projects:

// manifest.json
{
  "optimization": {
    "subPackages": true
  }
}

Troubleshooting

Common issue resolutions:

1. Cannot recognize node_modules:

   • Delete package-lock.json in the project
   • Run npm install again

2. Blank screen on real device debugging:

   • Check if USB debugging is enabled on the phone
   • Reconnect the data cable

3. Styles not taking effect:

   • Check if the scoped attribute is added
   • Use deep selectors:

/* Penetrate component styles */
::v-deep .custom-class {
  color: red;
}