# 快速上手

说明

通过本章节你可以了解到 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"
  }
}