# 快速上手

说明

通过本章节你可以了解到 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)使用小程序开发工具导入即可。也可前往GitHub (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"
  }
}

# 其他说明

uni-app组件示例项目中使用的this.tui.xxx 等 api 使用。

/*
   1、将文件 httpRequest.js 引入项目中（示例中路径 common/httpRequest.js）

   2、在根目录main.js 中 引入 httpRequest.js，并挂载即可使用
*/

import tui from './common/httpRequest'

// #ifndef VUE3
import Vue from 'vue'

Vue.config.productionTip = false
//important
Vue.prototype.tui = tui
App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store)
	//important
	app.config.globalProperties.tui = tui;
	return {
		app
	}
}
// #endif

微信小程序原生也可全局挂载使用使用wx.tui.xxx 等api

/*
   1、将文件 httpRequest.js 引入项目中（示例中路径 common/httpRequest.js）

   2、在根目录app.js 中 引入 httpRequest.js，并挂载即可使用
*/
//app.js
import tui from './common/httpRequest'
//挂载
wx.tui = tui

TIP

自v2.8.0+之后，全局配置中已提供部分基础api，可直接查看全局配置文档使用。

← 介绍进阶用法 →