Quick Start

This chapter shows how to add uView Pro X to a uni-app x project and get your first component running.

Prerequisites

• Use HBuilderX to create or open a uni-app x project (Vue 3 + UTS).
• The library is distributed as a uni_modules package and must be imported from the DCloud plugin marketplace in HBuilderX into your project's uni_modules/uview-pro-x directory.

Install the library

Currently the library can only be imported from the DCloud plugin marketplace; npm installation is not supported.

Marketplace page:

• uView Pro X · DCloud plugin marketplace

Import steps:

1. Open the marketplace link above and click "Import into HBuilderX".
2. Choose the target uni-app x project to finish the import.
3. The plugin lands in the project's uni_modules/uview-pro-x directory automatically — no manual copying needed.

Once installed, the project looks roughly like this:

your-project/
├─ uni_modules/
│  └─ uview-pro-x/
│     ├─ components/        # ux-* components
│     ├─ libs/              # utilities and hooks
│     ├─ locale/            # built-in language packs
│     ├─ index.uts          # library entry (install)
│     ├─ index.scss         # unified style entry
│     └─ theme.scss         # theme variables
├─ pages.json
├─ main.uts
└─ uni.scss

Configure easycom

Enable easycom auto-scanning in pages.json so ux-* components need no manual import:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^ux-(.*)": "@/uni_modules/uview-pro-x/components/ux-$1/ux-$1.uvue"
    }
  }
}

After that, just write <ux-button /> in a template. Components are compiled on demand — unused ones stay out of the build.

Register the library

Install it in main.uts via app.use, passing theme and locale as needed (omitted options fall back to built-in defaults):

import App from './App.uvue'
import uViewProX from './uni_modules/uview-pro-x'
import { createSSRApp } from 'vue'

export function createApp() {
    const app = createSSRApp(App)
    app.use(uViewProX, {
        // Locale: defaults to zh-CN; zh-CN / en-US are built in
        locale: {
            defaultLocale: 'zh-CN'
        }
    })
    return { app }
}

Every install option is optional

app.use(uViewProX) with no arguments works too: locale falls back to zh-CN and theme to the built-in blue.

Import theme styles

Append the theme variables to uni.scss so $u-* SCSS variables and --u-* CSS variables are available project-wide:

@import '@/uni_modules/uview-pro-x/theme.scss';

Use your first component

Use components directly in a page template:

<template>
    <view class="page">
        <ux-button text="Primary" type="primary" @click="onClick" />
        <ux-tag text="Tag" type="success" />
    </view>
</template>

<script setup lang="uts">
function onClick(): void {
    uni.showToast({ title: 'Button tapped', icon: 'none' })
}
</script>

<style scoped>
.page {
    display: flex;
    flex-direction: column;
    padding: 16px;
}
</style>

Run and preview

• H5: in HBuilderX use "Run → Run to Browser", or start a dev server from the CLI.
• App: connect a device or emulator and use "Run → Run to Phone or Emulator".
• WeChat Mini Program: set the mini-program appid in manifest.json, then "Run → Run to Mini Program Simulator".

All platforms are compiled uniformly by uni-app x and behave consistently; see Notice for platform differences.

Next steps

• Re-skin: Theming
• Dark adaptation: Dark Mode
• Internationalization: i18n