Tuniao UI Uniapp V3配置
node方式安装配置
1. 引入TuniaoUI V3样式
在App.vue文件的style标签中引入TuniaoUI V3样式
vue
<style>
@import '@tuniao/tn-style/dist/uniapp/index.css';
</style><style>
@import '@tuniao/tn-style/dist/uniapp/index.css';
</style>2. 配置tsconfig.json
TuniaoUI V3版本是使用了typescript进行开发，所以也提供了组件的提示，在tsconfig.json中配置types增加@tuniao/tnui-vue3-uniapp/global.d.ts配置项
3. 引入组件
3.1 easycom方式引入
注意
easycom方式需要在pages.json中配置easycom字段，如果不了解easycom的配置请查看uni-app官方文档
注意
在使用了easycom后组件名称在使用时需要变成tn-组件名，例如tn-title
警告
这里提供的easycom配置只用于使用tuniaoUI V3内置的组件，并不适用于第三方组件，如果需要将第三方组件通过easycom方式引入请自行配置
在pages.json中配置easycom字段
json
{
"easycom": {
"custom": {
"^tn-(.*)-(item|group)$": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1-$2.vue",
"^tn-(.*)": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1.vue"
}
},
}{
"easycom": {
"custom": {
"^tn-(.*)-(item|group)$": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1-$2.vue",
"^tn-(.*)": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1.vue"
}
},
}3.2 单独在页面中使用组件
TuniaoUI V3在开发时已经将全部组件都引出了Instance，方便全局进行安装，但是全局安装的时候为小程序端会出现不能引入的情况，所以需要在页面中引入组件
vue
<script lang="ts" setup>
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
</script>
<template>
<TnTitle title="图鸟UI" mode="vLine" />
</template><script lang="ts" setup>
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
</script>
<template>
<TnTitle title="图鸟UI" mode="vLine" />
</template>uni_modules方式安装配置
1. 引入TuniaoUI V3样式
在App.vue文件的style标签中引入TuniaoUI V3样式
vue
<style>
@import '@/uni_modules/tuniaoui-vue3/index.css';
</style><style>
@import '@/uni_modules/tuniaoui-vue3/index.css';
</style>2. 配置组件引入方式
2.1 easycom方式
注意
easycom方式需要在pages.json中配置easycom字段，如果不了解easycom的配置请查看uni-app官方文档
注意
在使用了easycom后组件名称在使用时需要变成tn-组件名，例如tn-title
在pages.json中配置easycom字段
感谢ThinkAdminAnyon大佬编写的easycom规则
json
{
"easycom": {
"custom": {
"^tn-(.*)-(item|group)$": "@/uni_modules/tuniaoui-vue3/components/$1/src/$1-$2.vue",
"^tn-(.*)": "@/uni_modules/tuniaoui-vue3/components/$1/src/$1.vue"
}
},
}{
"easycom": {
"custom": {
"^tn-(.*)-(item|group)$": "@/uni_modules/tuniaoui-vue3/components/$1/src/$1-$2.vue",
"^tn-(.*)": "@/uni_modules/tuniaoui-vue3/components/$1/src/$1.vue"
}
},
}2.2 单独引入组件
vue
<script lang="ts" setup>
import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
</script>
<template>
<TnTitle title="图鸟UI" mode="vLine" />
</template><script lang="ts" setup>
import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
</script>
<template>
<TnTitle title="图鸟UI" mode="vLine" />
</template>