uniapp开发微信小程序笔记9-uniapp中使用uview-plus

前言：因为uview官方没有出vue3版本，所以需要使用一个个人团队开发的uview-plus框架。该框架和vant的对比就是一次性配置之后，使用起来比较方便，很像pc端使用element-UI一样

一、下载uview-plus依赖包

1、先生成package.json文件

// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y

2、下载uview-plus

npm install uview-plus

 二、配置uview-plus

1、全局注册

在main.js中，引入并使用uview-plus的JS库

import App from './App'
import uviewPlus from 'uview-plus'

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(uviewPlus)
	return {
		app
	}
}
// #endif

2、在uni-scss中引入uview-plus的全局SCSS主题文件

@import 'uview-plus/theme.scss';

3、引入uview-plus基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

4、配置easycom组件模式

在pages.json中加入以下代码：

// pages.json
{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

三、使用

官网地址：介绍 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架

使用加载动画举例：

<up-loading-icon text="加载中" textSize="18"></up-loading-icon>

就根据官网的教程复制粘贴即可