贼好用的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": {}
}
相关推荐
寰宇软件2 小时前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php
尚学教辅学习资料3 小时前
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例
spring boot·uni-app·宠物
真的不想写实验3 小时前
uniapp引入ucharts组件不显示
uni-app
烂蜻蜓3 小时前
深入解析 Uniapp 的页面结构
前端·css·vue.js·uni-app·html·html5
Little_Code3 小时前
关于uniapp使用renderJS中调用父类方法和参数的使用
前端·javascript·uni-app
imsopoor3 小时前
【uniapp*vue3】app/h5 webview通讯方案
uni-app
abs6253 小时前
uniapp使用uts插件启动原生安卓Service
android·uni-app·uniapp uts插件·uniapp 安卓服务
貂蝉空大3 小时前
uni-app 开发app 时 ios上传图片失败的问题
uni-app
qq_316837753 小时前
uniapp h5端和app端 使用 turn.js
开发语言·javascript·uni-app
快乐的二进制鸭15 小时前
uniapp实现app的pdf预览
pdf·uni-app