快速上手

说明

通过本章节你可以了解到 ThorUI 的安装方法和基本使用姿势。首先我们希望你在使用前有一定的基础，如果对uniapp (opens new window)或者小程序 (opens new window)不了解，请先去官网查看文档。

安装

说明

ThorUI组件支持按需引入，可以手动在页面进行引入，也可以配置引入。

下载安装

手动复制到项目中

下载安装每次升级都需要重新下载并覆盖相关文件。ThorUI所有组件都在components文件夹中，可以整个拷贝到项目中，也可以选择自己需要的组件使用。

npm安装

npm安装

在现有项目中使用 ThorUI 时，可以通过npm进行安装： npm install thorui-uni

注：目前仅发布了uniapp非会员版本

示例项目

下载和使用

ThorUI提供了所有组件的演示示例以及相关模板。开源版本用户可以前往插件市场 (opens new window)下载。 在插件市场右上角选择使用 HBuilderX 导入示例项目或者下载示例项目ZIP，然后在HBuilder X中运行，小程序原生版 (opens new window)使用小程序开发工具导入即可。

引入组件

uni-app引入

第一种，手动引入

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

第二种，开启easycom组件模式 传送门 (opens new window)

 /*
    开启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"
		}
	}

微信小程序引入（可以在app.json中全局引入）

//json文件中手动引入
{
  "usingComponents": {
    "tui-button": "/components/thorui/tui-button/tui-button"
  }
}