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

说明

官网地址

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

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

使用方式

官方文档页面

uniapp插件市场

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

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

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

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

使用

任意找个.vue项目页面

vue2的.vue页面使用示例

需要导入-注册-使用

<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页面使用示例

<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里面新增

{
	"pages": [ 
		// ...
	],
	"globalStyle": {
		// ...
	},
	// 新增easycom节点，做如下配置即可
	// 如果是npm安装的组件，官方也有配置说明，具体查看官方文档，我这里只演示这一种使用方式
	"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	},
	"uniIdRouter": {}
}