使用uni-app的组件（基础组件和扩展组件）

目录

一、使用基础组件

二、使用扩展组件（uni-ui）

方式一：npm安装

方式二：通过uni-modules导入全部组件

---

一、使用基础组件

• 文档

uni-app官网•组件•组件概述https://uniapp.dcloud.net.cn/component/

基础组件在uni-app框架中已经内置，可以直接使用。

• 示例

如：使用内置组件 icon

二、使用扩展组件（uni-ui）

• 文档

uni-app官网•组件•扩展组件https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

扩展组件需要将组件导入项目中才可以使用。

方式一：npm安装

• 步骤

1.安装sass

npm i sass -D

2.安装sass-loader

npm i sass-loader -D

（ 如果指定系统版本，如：npm i sass-loader@10.1.1 -D ）

3.安装 uni-ui

npm i @dcloudio/uni-ui

4.配置easycom

在pages.json文件中配置

"easycom": {
	"autoscan": true,
	"custom": {
		// uni-ui 规则如下配置
		"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	}
}

示例： 

5.在根目录创建 vue.config.js 文件，并配置如下

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

（如果是 vue3 + vite, 无需添加配置）

6.使用组件

如：使用扩展组件 uni-card 

方式二：通过uni-modules导入全部组件

• 步骤

1.打开链接

dcloud•插件市场•uni-uihttps://ext.dcloud.net.cn/plugin?id=55

2.下载插件并导入HBuilderX

3.使用组件

如：使用扩展组件 uni-tag