引爆创意力！轻量、简洁、全面的移动端组件库！

近来一直都在开发移动端的项目，学习和尝试了多个移动端的组件库。其中有一款，了不起比较喜欢。这里分享给大家。大家在移动端项目中可以借鉴参考！

更多面试经验，和面试真题可以查看文档面试资料汇总-前端面试题大全 docs.qq.com/doc/DUVBFckdGY3diTml4

ThorUI简介

ThorUI是一款轻量、简洁的移动端组件库。提供近百个高质量组件，覆盖移动端各类场景，让您的开发效率倍速提升!

ThorUI包含近百款高质量组件，主要针对工作中常用功能，且会长期进行维护更新。

ThorUI目前有微信小程序原生版本和uni-app版本，后续会扩展到其他原生版本，扩大生态。一起来看看！

目前uni版组件默认支持App端(IOS和Android)、H5、微信小程序、QQ小程序、支付宝小程序、百度小程序、头条小程序。你要得都在这里了哦~

ThorUI安装

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

下载安装

ThorUI 可以手动复制到项目中使用。ThorUI所有组件都在components文件夹中，可以整个拷贝到项目中，也可以选择自己需要的组件使用。

这种方式有个小缺点，那就是每次升级都需要重新下载并覆盖相关文件。除非情况特殊，否则不建议大家这样安装。

npm安装

在现有项目中使用 ThorUI 时，可以通过npm进行安装。

npm install thorui-uni

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

引入组件

支持的项目比较多，这里给大家简单说一下组件的引用。

uni-app引入

第一种，手动引入

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

第二种，开启easycom组件模式

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

挂载ThorUI API的使用说明

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

更多进阶用法，请参考官方文档地址

https://thorui.cn/doc

更多面试经验，和面试真题可以查看文档面试资料汇总-前端面试题大全 docs.qq.com/doc/DUVBFckdGY3diTml4

ThorUI 组件库预览

ThorUI 提供了丰富的，高质量，高颜值的组件库。这里我们快速看一下！

常用字体图标，支持基本样式设置。

各种数字角标。

卡片布局

可自定义的时间轴

各种下来菜单操作

支持半星评分

组件还有很多，这里不一一展示了。请大家参阅官方地址查看。

官方地址
https://thorui.cn/doc/

其他

ThorUI秉承简洁至上原则进行开发，不断维护、更新和完善。

除了高质量高颜值的组件库，ThorUI还会陆续推出各种布局模板来提升工作效率，让您更加快速搭建项目。这给开发者们带来很多的便利！

但需要注意：如果你使用ThorUI开发项目售卖或者做外包项目，则你需要替每个购买者或者外包客户购买一份授权~

好啦~ 今天就到这里了！后续持续为大家分享更多精彩内容~ 下期见