# UniApp — Cross-Platform Framework Using Vue.js

> Build iOS, Android, H5, and mini-program apps from a single Vue.js codebase with native performance and broad platform reach.

## Install

Save as a script file and run:

# UniApp — Cross-Platform Framework Using Vue.js

## Quick Use
```bash
npm install -g @dcloudio/uni-cli
npx degit dcloudio/uni-preset-vue#vite my-app
cd my-app && npm install
npm run dev:h5
```

## Introduction
UniApp lets you write one Vue.js codebase and compile it to iOS, Android, H5, and over a dozen mini-program platforms including WeChat, Alipay, and Baidu. It bridges the gap between native performance and web developer productivity by providing a unified API layer across all target runtimes.

## What UniApp Does
- Compiles Vue 3 single-file components to native and web targets from one project
- Supports conditional compilation for platform-specific code paths
- Provides a rich set of built-in UI components optimized for mobile
- Integrates with native plugins through a unified plugin marketplace
- Offers HBuilderX IDE with visual debugging and hot reload across platforms

## Architecture Overview
UniApp uses a compiler-driven architecture that transforms Vue SFCs into platform-specific bundles. For H5 it produces standard web output via Vite; for native apps it leverages a custom runtime built on top of the platform's native rendering engine; for mini-programs it transpiles to each platform's template and scripting format. The conditional compilation system uses preprocessor directives to include or exclude code per platform at build time.

## Self-Hosting & Configuration
- Install via npm or use HBuilderX IDE for a visual workflow
- Configure target platforms in `manifest.json` with app IDs and permissions
- Use `pages.json` for routing, navigation bar, and tab bar settings
- Environment variables and platform conditions set in `vue.config.js`
- Native plugins managed via the DCloud plugin marketplace or local integration

## Key Features
- Single codebase targets 13+ platforms including native iOS/Android
- Vue 3 composition API and TypeScript support
- Conditional compilation with `#ifdef` directives for platform branching
- Extensive component and API compatibility across all targets
- Large ecosystem with thousands of community plugins and templates

## Comparison with Similar Tools
- **React Native** — React-based, targets iOS/Android only, no mini-program support
- **Flutter** — Dart language, strong native performance but no mini-program output
- **Taro** — React-based cross-platform for mini-programs, narrower native support
- **Weex** — Vue-based but limited maintenance and smaller ecosystem
- **Ionic** — Web-first hybrid apps, relies on WebView for native feel

## FAQ
**Q: Does UniApp support Vue 3?**
A: Yes. UniApp fully supports Vue 3 with the Composition API, script setup, and TypeScript.

**Q: Can I use npm packages in UniApp?**
A: Most npm packages that do not depend on browser-specific APIs work. Platform-specific packages may need conditional compilation.

**Q: How does performance compare to fully native apps?**
A: For most business apps the difference is minimal. UniApp compiles to native views on mobile, not WebView, so rendering performance is close to native.

**Q: Is UniApp free to use?**
A: The framework and CLI are open source under the Apache 2.0 license. HBuilderX IDE is free with optional cloud services.

## Sources
- https://github.com/dcloudio/uni-app
- https://uniapp.dcloud.net.cn/

---
Source: https://tokrepo.com/en/workflows/uniapp-cross-platform-framework-using-vue-js-88aa5aab
Author: Script Depot