uniapp | 快速上手ThorUI组件

一、安装ThorUI组件

1.在现有项目中使用 ThorUI 时,可以通过npm进行安装:

npm install thorui-uni

2.检查是否安装成功,搜索thorui-uni

二、引入组件

1.第一种,手动引入

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

2.第二种,开启easycom组件模式**(推荐)**

官方版本:

javascript 复制代码
 /*
    开启easycom组件模式,不需要再执行第一种引入操作即可使用
	注意组件的位置是否和示例中一致,如果不一致需要自行调整下方地址
 */
 
"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	}
	
// 使用npm安装时,使用以下配置(配置完成后重新编译运行)
"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "thorui-uni/lib/thorui/tui-$1/tui-$1.vue"
		}
	}

在我的项目中配置(使用第二种方法):

pages.json

javascript 复制代码
"easycom": {
        "autoscan": true,
        "custom": {
            "tui-(.*)": "thorui-uni/lib/thorui/tui-$1/tui-$1.vue"
        }
    },

特别注意:修改完pages.json时,要重新编译

三、使用对应组件

1.使用tui-icon 字体图标

html 复制代码
<tui-icon name="feedback"></tui-icon>

2.查看界面显示,是否有对应组件

可以看到成功显示了对应的组件,就证明引入是没有问题的

3.Q:如果有没有显示对应组件的小伙伴

A:可以试试,把对应生成的dist文件夹删除,再重新编译生成,亲测有效!!!

4.对应其他组件的使用详情:可以看对应的官方文档

tui-icon 字体图标 | ThorUI文档

讲个题外话,这个组件文档的小猫真的好可爱,作者大大真的有心了!!!,超可爱的好嘛

相关推荐
2501_915909067 分钟前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
Holin_浩霖20 分钟前
为什么typeof null 返回 "object" ?
前端
PanZonghui21 分钟前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui27 分钟前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
_extraordinary_1 小时前
Java Linux --- 基本命令,部署Java web程序到线上访问
java·linux·前端
用户1456775610371 小时前
推荐一个我私藏的电脑神器:小巧、无广、功能强到离谱
前端
用户1456775610371 小时前
终于找到了!一个文件搞定PDF阅读
前端
liangshanbo12151 小时前
React 18 的自动批处理
前端·javascript·react.js
一位搞嵌入式的 genius1 小时前
前端实战开发(二):React + Canvas 网络拓扑图开发:6 大核心问题与完整解决方案
前端·前端框架
da_vinci_x1 小时前
设计稿秒出“热力图”:AI预测式可用性测试工作流,上线前洞察用户行为
前端·人工智能·ui·设计模式·可用性测试·ux·设计师