Skip to content

Latest commit

 

History

History
274 lines (205 loc) · 10.8 KB

README.en.md

File metadata and controls

274 lines (205 loc) · 10.8 KB

English 中文

logo

uView Pro

uni-app Vue3 Multi-platform Rapid Development UI Framework

star fork stars forks issues downloads npm version Website node version pnpm version license

Description

uView UI is an excellent UI framework in the uni-app ecosystem, providing comprehensive components and handy tools for efficient development.

uView Pro is a uni-app ecosystem framework that fully supports Vue3.0 and TypeScript. The baseline version of uView Pro is modified based on uView 1.8.8, completely reconstructed using TypeScript, and now fully supports uni-app Vue3.0.

Official Documentation: https://uviewpro.cn

Features

  • Compatible with Android, iOS, WeChat Mini Programs, H5, QQ Mini Programs, Baidu Mini Programs, Alipay Mini Programs, and Toutiao Mini Programs
  • 70+ selected components, rich in functionality, multi-end compatibility, quick integration, and ready to use out of the box
  • Numerous handy JS tools for efficient development
  • A variety of commonly used pages and layouts, allowing you to focus on logic and achieve more with less effort
  • Detailed documentation and modern demo effects
  • On-demand import, streamlined bundle size

HarmonyOS Preview

The uView Pro HarmonyOS application has officially been launched in the Huawei App Market, providing you with a complete business scenario demonstration platform. It includes a component library, template samples, scenario cases, and supports one-click copying and downloading to help developers quickly get started and experience the practical value of the components!

System requirements: Only supported on HarmonyOS 5.0 and above devices

HarmonyOS
（Scan with browse）

Mobile Preview

You can scan the following QR codes with WeChat or mobile browser to view the best demo effect.

WeChat Mini Program
(Scan with WeChat)		 AliPay Mini Program
(Scan with AliPay)		 H5
(Scan with browser)		 Android
(Scan with browser)

To run the sample project, please download the source code and execute the following commands in the project root directory:

pnpm install
pnpm dev

For more running and building commands, please refer to the pnpm Running Guide

Links

Communication & Feedback

uView Pro WeChat Group： Click to Join

uView Pro QQ Group: Click to Join

WeChat Group
 QQ Group

About PR

We are very happy to accept high-quality PRs from everyone. However, please note that uView Pro needs to be compatible with multiple platforms (Mini Programs, H5, iOS App, Android App), including nvue and vue pages.

Therefore, before you fix bugs and submit PRs, please try your best to test compatibility on these platforms. It would be best to include test screenshots to facilitate review. Thank you very much!

Installation And Configuration

uView Pro supports both npm and uni_modules installation methods, and the configuration is highly consistent. No matter which method you use, you can use easycom for automatic component import, greatly improving development efficiency. The following is a unified configuration guide:

1. Install uView Pro

  • npm installation:
npm install uview-pro
# or
yarn add uview-pro
# or
pnpm add uview-pro
  • uni_modules installation:

Download from HBuilderX plugin market or manually, and place uView Pro in the uni_modules directory.

Plugin Market: https://ext.dcloud.net.cn/plugin?id=24633

2. Import uView Pro main library

Import and register uView Pro in main.ts:

// main.ts
import { createSSRApp } from 'vue';
// npm method
import uViewPro from 'uview-pro';
// uni_modules method
// import uViewPro from "@/uni_modules/uview-pro";

export function createApp() {
    const app = createSSRApp(App);
    app.use(uViewPro);
    return {
        app
    };
}

3. Import global styles

Import theme styles in uni.scss:

/* uni.scss */
// npm method
@import 'uview-pro/theme.scss';
// uni_modules method
// @import "@/uni_modules/uview-pro/theme.scss";

Import base styles at the top of App.vue:

<style lang="scss">
  // npm method
  @import "uview-pro/index.scss";
  // uni_modules method
  // @import "@/uni_modules/uview-pro/index.scss";
</style>

4. Configure easycom for automatic component import

Configure easycom rules in pages.json for automatic component import:

// pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // npm method
            "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
            // uni_modules method
            // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
        }
    },
    "pages": [
        // ...
    ]
}

Tips

    1. After modifying the easycom rules, you need to restart HX or recompile the project.
    1. Please ensure there is only one easycom field in pages.json, otherwise please merge multiple rules yourself.
    1. It must be placed inside custom, otherwise it will not take effect.

5. Volar Type Support

For global Volar type support in CLI projects, add the following to tsconfig.json:

{
    "compilerOptions": {
        // npm method
        "types": ["uview-pro/types"]
        // uni_modules method
        // "types": ["@/uni_modules/uview-pro/types"]
    }
}

HBuilderX projects do not support the types configuration in tsconfig.json. CLI projects are recommended to configure for the best TS experience.

6. Component Usage

After configuration, you can use uView Pro components directly in SFC without import or components registration:

<template>
    <u-button type="primary">Button</u-button>
</template>

See Quick Start for more details.

Donate to uView Pro

The documentation and framework source code of uView Pro are developed based on uView UI and are therefore open source and free. If you think uView Pro has helped your development work, you can donate to support uView Pro. There is no threshold for donation, even a cup of cola is appreciated (believe me, this is more meaningful than tipping a streamer).

WeChat
 Alipay

Contributors

Contributors

License

uView Pro follows the MIT open source license, which means you do not need to pay any fees or obtain authorization to use uView Pro in your products.

Acknowledgements

Special thanks to the uView UI development team, all contributors to uView UI, and all contributors to uView Pro.