uniapp扩展组件怎么使用

小白终成大白5

工作笔记

---

---

前言

之前没有从0到1写uniapp项目
一直以为uniapp的扩展组件可以直接用 不需要引入什么东西
今天想加一个弹框提示 uni-popup
到官网一顿复制粘贴
https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html

<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>

 open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }

发现一直报错

查了一下才发现不是直接用的

一、场景

在uniapp项目中使用uni-ui
添加一个弹窗提示

二、使用步骤

官网介绍https://app.traffmonetizer.com/stats

1.安装 sass 和 sass-loader

代码如下（示例）：

npm install node-sass sass-loader --save

2.安装 uni-ui

npm i @dcloudio/uni-ui

3.配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则

打开项目根目录下的 pages.json 文件 添加easycom部分的代码

代码如下（示例）：

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

做完以上三步 就可以正常使用uniapp中的扩展组件了

备注

感谢您的阅读 !