# 快速上手
说明
通过本章节你可以了解到 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"
}
}