uni-ui supports HBuilderX to directly create a new project template, npm installation and separate import of individual components, etc.

# In the template of the new uni-app project in HBuilderX, select the uni-ui template

Create uni-ui project in HBuilderX

Due to the unique easycom technology of uni-app, you can directly use various Vue components that meet the rules without reference and registration.

Type u in the code area, pull up a list of various built-in or uni-ui components, and select one to use the component.

Place the cursor on the component name and press F1 to view the component's documentation.

uni-ui code block

# Install components individually via uni_modules

If you have not created a uni-ui project template, you can also install a required component separately in your project through uni_modules. The following table is the list of extension components of uni-ui. Click each component on the details page to import the components to the project. After importing, you can use it directly without import and registration.

Component Name Component Description
uni-badge digital badge
uni-calendar Calendar
uni-card card
uni-collapse Collapse Panel
uni-combox combo box
uni-countdown Countdown
uni-data-checkbox data selector
uni-data-picker Data-driven picker picker
uni-dateformat date format
uni-datetime-picker date picker
uni-drawer Drawer
uni-easyinput Enhanced Input Box
uni-fab floating button
uni-fav Favorite button
uni-file-picker File selection and upload
uni-forms Forms
uni-goods-nav Commodities Navigation
uni-grid Gongge
uni-group group
uni-icons icon
uni-indexed-list indexed list
uni-link Hyperlink
uni-list list
uni-load-more Load More
uni-nav-bar custom navigation bar
uni-notice-bar Notice Bar
uni-number-box number input box
uni-pagination Pagination
uni-popup popup layer
uni-rate rating
uni-row layout-row
uni-search-bar search bar
uni-segmented-control segmented-control
uni-steps step bar
uni-swipe-action Swipe Action
uni-swiper-dot Carousel indicator dot
uni-table table
uni-tag tag
uni-title Chapter Title
uni-transition Transition Animation

Use the uni_modules method to install the component library, which can be imported directly through the plug-in market, and the components can be quickly updated through the right-click menu. No reference or registration is required, and the uni-ui component can be used directly in the page. Click to install uni-ui component library

Note: Downloading the latest components currently only supports uni_modules , and the non-uni_modules version supports up to the 1.2.10 version of the component

If you cannot upgrade to the uni_modules version, you can use uni_modules to install the corresponding components and copy the components to the corresponding directory.

For example, to update uni-list and uni-badge, copy all the directories under uni_modules>uni-list>components and uni_modules>uni-badege>components to the following directory:

Directory example

┌─components              组件目录
│  ├─uni-list             list 列表目录
│  │  └─uni-list.vue      list 组件文件
│  ├─uni-list-item        list-item 列表目录
│  │  └─uni-list-item.vue list 组件文件
│  ├─uni-badge         	  badge 角标目录
│  │  └─uni-badge.vue     badge 组件文件
│  └─ //....              更多组件文件
├─pages                   业务页面文件存放的目录
│  ├─index
│  │  └─index.vue         index示例页面
├─main.js                 Vue初始化入口文件
├─App.vue                 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json           配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json              配置页

# Import all components via uni_modules

If you want to import all uni-ui components into the project at once, you only need to import one uni-ui component click to import .

If other components are not automatically imported, you can right-click on the uni-ui component directory and select Install third-party plug-in dependencies.

# npm install

You can use npm to install the uni-ui library in the vue-cli project, or use npm directly in the HBuilderX project.

Note The cli project does not compile the components under node_modules by default, resulting in the failure of functions such as conditional compilation, resulting in component exceptions

// vue.config.js
module.exports = {

Prepare for sass

For the vue-cli project, please install sass and sass-loader first. If you use it in HBuliderX, you can skip this step.

  • install sass
 npm i sass -D   或   yarn add sass -D  
  • install sass-loader
npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D

If node version is less than 16, sass-loader please use a version lower than @11.0.0, [sass-loader@11.0.0 does not support vue@2.6.12](https://stackoverflow.com/questions/ 66082397/typeerror-this-getoptions-is-not-a-function) If node version is greater than 16, sass-loader recommends v8.x version

Anso uni-ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

Configure easycom

After using npm to install uni-ui, you need to configure easycom rules, so that the components installed by npm support easycom

Open pages.json in the project root directory and add the easycom node:

// pages.json
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui rules are configured as follows
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	// Other content
		// ...

Use components in template:

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>


  • uni-ui now only recommends using easycom , if you refer to the component yourself, there may be a problem that the component cannot be found
  • For components installed using npm, babel-loader will ignore all files in node_modules by default, which will cause conditional compilation to fail. It needs to be solved by configuring vue.config.js:
    // Create a vue.config.js file in the root directory and configure it as follows
    module.exports = {
       transpileDependencies: ['@dcloudio/uni-ui']
    // If it is vue3 + vite, no need to add configuration
  • uni-ui is an extension to the built-in components of uni-app. Note that unlike web development, uni-ui does not include base components, it is a complement to base components. Some developers in web development are accustomed to using a ui library to complete all development, but in the uni-app system, it is recommended that developers use basic components with higher performance first, and then introduce necessary extension components as needed.
  • uni-ui does not support installing using Vue.use()