uView UI Documentation

Install the uview-ui package using npm to add the UI framework to your uni-app project.

npm i uview-ui

Once the easycom rule is configured in pages.json, you do not need to manually import components. You can use them directly in your templates by prefixing the component name with u-.

<template>
	<u-button>按钮</u-button>
</template>

To use uView UI in a uni-app project, follow these four configuration steps:

1. Register the library in main.js: Import uView and use it with Vue.
2. Import base styles in App.vue: Import the main SCSS file. Ensure your <style> tag includes lang="scss".
3. Import global variables in uni.scss: Import the theme SCSS file to enable global variable support.
4. Configure easycom in pages.json: Add the easycom rule to enable automatic component loading (on-demand import).

// 1. main.js
import uView from 'uview-ui';
Vue.use(uView);

// 2. App.vue
<style lang="scss">
@import "uview-ui/index.scss";
</style>

// 3. uni.scss
@import "uview-ui/theme.scss";

// 4. pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	}
}

To enable on-demand loading of uView components without manual imports, add the following rule to your pages.json.

Note for npm users: Do NOT use the @/ prefix. Use the path uview-ui/components/u-$1/u-$1.vue. Note for download/manual installation users: Use the @/ prefix (e.g., @/uview-ui/components/u-$1/u-$1.vue).

// pages.json
{
	"easycom": {
		// npm installation method
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		
		// Download/Manual installation method
		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	}
}

For WeChat Mini-programs or other mini-program environments, uView provides a mixin to simplify the implementation of sharing features. Import it from uview-ui/libs/mixin/mpShare.js and apply it using Vue.mixin().

// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare);

To use uView UI in your Vue application, import uView from uview-ui and register it using Vue.use(uView). This makes uView components and utilities available globally throughout your application.

import uView from 'uview-ui';
Vue.use(uView);

uView UI is a Vue plugin that can be installed into your application. Upon installation, it performs the following actions:

1. Registers a global mixin.
2. Adds global filters for time formatting: timeFormat, date, and timeFrom.
3. Mounts the $u utility object to the Vue prototype (this.$u) and the global uni object (uni.$u).

To use it in a Vue-based uni-app project, use the install method provided by the default export.

The u-avatar-cropper component allows users to select and crop an image for an avatar. You can configure the output dimensions, the cropping area size, and the file format via the route method.

When the cropping process is complete, the component emits the resulting image path via the global uni.$on('uAvatarCropper', callback) event listener.

uView provides a shorthand mixin for Vuex to simplify state management access. You can integrate it by requiring the mixin file from @/store/$u.mixin.js and applying it via Vue.mixin().

// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js');
Vue.mixin(vuexStore);

Once easycom is configured in pages.json, you can use uView components directly in your templates without importing them manually.

<template>
	<u-button>按钮</u-button>
</template>