uni-app使用第三方UI组件库的引入方式(ThorUI)

最新推荐文章于 2025-04-06 20:06:38 发布

爱吃糖的小明

最新推荐文章于 2025-04-06 20:06:38 发布

阅读量6.2k

点赞数 3

分类专栏： vue 文章标签： vue

版权

20 篇文章

订阅专栏

本文详细介绍如何将ThorUI组件库导入uni-app项目中，包括新建项目、复制组件库、配置easycom组件模式、修改main.js及App.vue文件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ThorUI组件库

首先进入到ThorUI的官方网站：http://www.thorui.cn/，去下载UI组件库，备用

把下载下来的ThorUI组件库文件夹内容复制到自己项目的对应文件夹中，自己项目中么有的文件夹，就整个文件夹复制过去

打开自己项目的pages.json文件，按照官方文档的方式，配置pages.json文件

 //开启easycom组件模式（无需手动引入，开发工具自带智能感知）
 
"easycom": {
		"autoscan": true,
		"custom": {
			"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
		}
	}

把ThorUI组件库中的main.js里面所有内容，覆盖掉自己的main.js内容(需要其他的配置，再另外做配置，这里先全部覆盖掉)；

接着在App.vue中引入ThorUI组件库的common样式

可以在官方的组件库中找到自己想要的组件，根据ThorUI组件库对应组件，复制里面的内容到自己的项目中