从0到1构建uniapp应用-集成thorui组件库

49 阅读1分钟

背景

在使用uniapp开发微信小程序过程中, 组件库的选择至关重要。市面上有很多组件库的解决方案。
此文给大家推荐ThorUI 一款仿微信的组件库, 可以说非常实用。
大家可以在thorui官网下载公开版本进行集成。

集成步骤

  • 开启easycom组件模式, 不需要在每个页面都引用组件。 这个配置加在page.json文件里面
 /*
    开启easycom组件模式,不需要再执行第一种引入操作即可使用
	注意组件的位置是否和示例中一致,如果不一致需要自行调整下方地址
 */
 
"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	}
  • 在me/index.vue下面引入组件进行测试
<template>
	<view>
		我的个人页面<br>
		<tui-icon name="about"></tui-icon>
		<tui-button>测试按钮</tui-button>
	</view>
</template>

![mincode.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0cafc5a0ee847fe95e15bf41c2cdfc8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=258&h=258&s=42292&e=jpg&b=fdfcfc)
  • 最终效果

WX20240403-184031@2x.png

  • 在线体验地址

mincode.jpg

从0到1构建uniapp应用-创建标签页Tabs