贼好用的Uniapp的UI组件库Thor UI

说明

官网地址

同时兼容(vue2和vue3)以及以下平台

  • 微信小程序
  • uni-app
  • h5
  • 支付宝小程序
  • 百度小程序
  • 头条小程序

使用方式

官方文档页面

uniapp插件市场

前往插件市场导入到Hbuilder里面

然后会在Hbuilder里面创建一个项目,点击创建即可

运行项目可以发现这个组件库所有的组件样式

将这个项目的components复制一份到我们的uniapp项目的根目录下

使用

任意找个.vue项目页面

vue2的.vue页面使用示例

需要导入-注册-使用

js 复制代码
<template>
	<div>
		<tui-button>页面主操作</tui-button>
		<tui-button type="warning">页面次要操作</tui-button>
		<tui-button type="danger">页面次要操作</tui-button>
		<tui-button type="gray-primary">页面次要操作</tui-button>
	</div>
</template>

<script>
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	export default {
		components:{
			tuiButton
		},
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped>

</style>

vue3的.vue页面使用示例

js 复制代码
<template>
	<div>
		vue3
		<tui-button>页面主操作</tui-button>
		<tui-button type="warning">页面次要操作</tui-button>
		<tui-button type="danger">页面次要操作</tui-button>
		<tui-button type="gray-primary">页面次要操作</tui-button>
	</div>
</template>

<script setup>
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
</script>

<style>
</style>

这样页面就可以显示了

配置全局使用

大家可能会发现,不管是vue2还是vue3都是需要导入才能使用的,下面这个配置可以无需重复导入,直接就可以使用

pages.json里面新增

js 复制代码
{
	"pages": [ 
		// ...
	],
	"globalStyle": {
		// ...
	},
	// 新增easycom节点,做如下配置即可
	// 如果是npm安装的组件,官方也有配置说明,具体查看官方文档,我这里只演示这一种使用方式
	"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	},
	"uniIdRouter": {}
}
相关推荐
UI设计和前端开发从业者11 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
ModyQyW13 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
共享ui设计和前端开发人才1 天前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机1 天前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机1 天前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
UI设计和前端开发从业者1 天前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app