快速开始

本章介绍如何在 uni-app x 项目中引入 uView Pro X，并跑通第一个组件。

环境准备

使用 HBuilderX 创建或打开一个 uni-app x 项目（Vue3 + UTS）。
组件库以 uni_modules 形式分发，需在 HBuilderX 中通过 DCloud 插件市场导入到项目的 uni_modules/uview-pro-x 目录。

安装组件库

目前仅支持通过 DCloud 插件市场导入，不支持 npm 安装。

插件市场地址：

uView Pro X · DCloud 插件市场

导入步骤：

打开上述插件市场链接，点击「导入到 HBuilderX」。
选择目标 uni-app x 项目，完成导入。
插件会自动落到项目的 uni_modules/uview-pro-x 目录，无需手动拷贝。

安装完成后，项目结构大致如下：

your-project/
├─ uni_modules/
│  └─ uview-pro-x/
│     ├─ components/        # ux-* 组件
│     ├─ libs/              # 工具函数与 hooks
│     ├─ locale/            # 内置语言包
│     ├─ index.uts          # 库入口（install）
│     ├─ index.scss         # 样式统一入口
│     └─ theme.scss         # 主题变量
├─ pages.json
├─ main.uts
└─ uni.scss

配置 easycom

在 pages.json 中开启 easycom 自动扫描，使 ux-* 组件无需手动 import：

json

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

配置后，模板里直接写 <ux-button /> 即可，组件按需编译，未使用的组件不会进入产物。

注册组件库

在 main.uts 中通过 app.use 安装，并按需传入主题与语言（不传则使用内置默认值）：

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, {
        // 语言：默认 zh-CN，内置 zh-CN / en-US
        locale: {
            defaultLocale: 'zh-CN'
        }
    })
    return { app }
}

安装选项可全部省略

app.use(uViewProX) 不带参数也能运行：语言取内置 zh-CN，主题取内置官方蓝。

引入主题样式

在 uni.scss 末尾引入组件库的主题变量，使 $u-* SCSS 变量与 --u-* CSS 变量在全项目可用：

scss

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

使用第一个组件

在页面模板中直接使用组件：

vue

<template>
    <view class="page">
        <ux-button text="主要按钮" type="primary" @click="onClick" />
        <ux-tag text="标签" type="success" />
    </view>
</template>

<script setup lang="uts">
function onClick(): void {
    uni.showToast({ title: '点击了按钮', icon: 'none' })
}
</script>

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

运行与预览

H5：HBuilderX 菜单「运行 → 运行到浏览器」，或命令行启动 dev server。
App：连接真机或模拟器，「运行 → 运行到手机或模拟器」。
微信小程序：需先配置 manifest.json 中的小程序 appid，再「运行 → 运行到小程序模拟器」。

各端渲染均由 uni-app x 统一编译，组件行为一致；平台差异详见注意事项。

下一步

换肤：多主题配置
深色适配：暗黑模式
国际化：多语言

快速开始 ​

环境准备 ​

安装组件库 ​

配置 easycom ​

注册组件库 ​

引入主题样式 ​

使用第一个组件 ​

运行与预览 ​

下一步 ​