说明
同时兼容(vue2和vue3)以及以下平台
- 微信小程序
- uni-app
- h5
- 支付宝小程序
- 百度小程序
- 头条小程序
使用方式
前往插件市场导入到Hbuilder里面
然后会在Hbuilder里面创建一个项目,点击创建即可
运行项目可以发现这个组件库所有的组件样式
将这个项目的components
复制一份到我们的uniapp
项目的根目录下
使用
任意找个.vue
项目页面
vue2的.vue
页面使用示例
需要导入-注册-使用
js
<template>
<div>
<tui-button>页面主操作</tui-button>
<tui-button type="warning">页面次要操作</tui-button>
<tui-button type="danger">页面次要操作</tui-button>
<tui-button type="gray-primary">页面次要操作</tui-button>
</div>
</template>
<script>
import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
export default {
components:{
tuiButton
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
vue3的.vue
页面使用示例
js
<template>
<div>
vue3
<tui-button>页面主操作</tui-button>
<tui-button type="warning">页面次要操作</tui-button>
<tui-button type="danger">页面次要操作</tui-button>
<tui-button type="gray-primary">页面次要操作</tui-button>
</div>
</template>
<script setup>
import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
</script>
<style>
</style>
这样页面就可以显示了
配置全局使用
大家可能会发现,不管是vue2还是vue3都是需要导入才能使用的,下面这个配置可以无需重复导入,直接就可以使用
在pages.json
里面新增
js
{
"pages": [
// ...
],
"globalStyle": {
// ...
},
// 新增easycom节点,做如下配置即可
// 如果是npm安装的组件,官方也有配置说明,具体查看官方文档,我这里只演示这一种使用方式
"easycom": {
"autoscan": true,
"custom": {
"tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
}
},
"uniIdRouter": {}
}