Uni-UI 的安装和使用

Uni-UI 提供多种使用方式，支持在 HBuilderX 中直接新建项目模板，单独安装组件，或通过 npm 安装组件。下面将对这些使用方式进行详细讲解。

1. 在 HBuilderX 新建 uni-app 项目并选择 Uni-UI 模板

在 HBuilderX 中新建 uni-app 项目时，可以选择 Uni-UI 模板，这种方式可以直接使用 Uni-UI 提供的各类组件。

由于 uni-app 的 easycom (opens new window) 技术，无需手动引用或注册组件，符合规则的组件可以直接使用。

1. 在代码区域中输入字母 u，可以拉出 Uni-UI 的组件列表，选择你需要的组件即可。
2. 组件文档的快捷查看：将光标放在组件名称上，按下 F1 即可查阅该组件的文档。

2. 使用 uni_modules 单独安装组件

如果你并未创建基于 Uni-UI 模板的项目，仍然可以通过 uni_modules 单独安装需要的组件。无需 import 或注册组件，安装后即可直接使用。

Uni-UI 的部分扩展组件列表：

组件名	组件说明
uni-badge	数字角标 (opens new window)
uni-calendar	日历 (opens new window)
uni-card	卡片 (opens new window)
uni-collapse	折叠面板 (opens new window)
uni-combox	组合框 (opens new window)
uni-countdown	倒计时 (opens new window)
...	更多组件参考 组件列表 (opens new window)。

如何导入组件： 点击每个组件的详情页面，并选择导入到项目中，之后无需手动 import 即可使用。

目录示例：

┌─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              配置页面路由

注意：最新的组件仅支持 uni_modules 版本。如果需要使用旧版（非 uni_modules），可以手动将组件拷贝到项目中。

3. 通过 uni_modules 导入所有组件

如果想一次导入所有的 Uni-UI 组件，只需在插件市场导入 uni-ui 组件即可 点击去导入 (opens new window)。

导入后，如果某些组件未自动引入，可以在 Uni-UI 组件目录右键选择“安装三方插件依赖”。

4. 通过 npm 安装 Uni-UI 组件

除了通过 HBuilderX，你还可以在 vue-cli 项目中通过 npm 安装 Uni-UI 组件：

npm i @dcloudio/uni-ui   # 或者使用 yarn
yarn add @dcloudio/uni-ui

注意：

• cli 项目中需要手动配置 vue.config.js 来确保编译 node_modules 下的组件：

// vue.config.js
module.exports = {
	transpileDependencies: ['@dcloudio/uni-ui']
}

准备 Sass

如果你使用 vue-cli 项目，需要先安装 sass 和 sass-loader：

# 安装 sass
npm i sass -D   或者   yarn add sass -D

# 安装 sass-loader
npm i sass-loader@10.1.1 -D   或者   yarn add sass-loader@10.1.1 -D

如果 node 版本小于 16，建议使用 sass-loader 低于 11.0.0 的版本；如果 node 版本大于 16，则建议使用 v8.x 版本。

配置 Easycom 规则

在 npm 安装 Uni-UI 后，需要配置 easycom 规则，确保组件可以自动引入。你可以在项目根目录的 pages.json 文件中添加如下配置：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	// 其他内容
	pages:[ ... ]
}

在模板中使用组件

<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>
</template>

<script>
export default {
  methods: {
    bindClick() {
      console.log("Badge clicked");
    }
  }
}
</script>

注意事项

• 使用 npm 安装的组件，需要配置 vue.config.js 才能正确编译 node_modules 下的文件。

// vue.config.js
module.exports = {
	transpileDependencies: ['@dcloudio/uni-ui']
}

• Uni-UI 是 Uni-App 的扩展组件库，不包含基础组件，需根据需求按需引入补充组件。

• 不支持使用 Vue.use() 方式安装。