编译期增强工具

tui-vitex

编译辅助工具，将简单组件编译为官方组件，复杂组件采用 Canvas 绘制，解决层层封装的性能问题。

快速开始使用示例配置选项

编译目标

官方组件

复杂组件

Canvas 绘制

样式系统

VaporCSS

介绍

tui-vitex 主要解决UI组件库层层封装的问题。tui-vitex会将简单的组件编译成官方组件，复杂的组件采用canvas进行绘制。

简单介绍：

当你使用t-button的时候，只是给你的感觉是在使用t-button，实际上会编译成button，这样减少过多的抽象，解决层层封装DOM越来越多的问题，同时也可以在其它端使用t-button组件的各项属性和事件。

t-page在APP会编译为scroll-view，在其它端编译为view，避免了不友好的条件编译写法：

<!-- 旧版代码 -->
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
  
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>


<!-- 新版代码不用写条件编译 -->
<template>
 <t-page>
    
 </t-page>
</template>
<!-- 在APP端，`t-page`会编译为`scroll-view`， -->
<template>
 <t-page>
    
 </t-page>
</template>

<!-- 在其它端会编译为`view`。 -->
<template>
 <view>
    
 </view>
</template>

代码更整洁

支持像html一样直接使用svg，编译器实际会把svg代码块编译为字符串，在image中显示。

<!-- 写法 -->
<view class="card-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>
              活跃用户
</view>

<!-- 编译为UVUE支持的代码 -->

<view class="card-title">
            <image :src="`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>`" />
             
              活跃用户
</view>

总结它的作用就是：

• 提高代码整洁性
• 减少层层抽象、封装
• 减少条件编译
• 自动处理依赖，编译阶段自动帮你完成

另外还有更多强大的功能，请查看详细文档。

快速开始

基本接入方式

在 vite.config.ts 中配置 tui-vitex 插件，无需手动导入主题配置：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import TuiCollector from './uni_modules/tui-vitex';

export default defineConfig({
    devSourcemap: true,
    plugins: [
        TuiCollector(),
        uni()
    ]
});

主题配置

插件启动时会自动检测项目根目录是否存在 theme.json，若不存在则自动创建默认主题配置文件。你也可以手动修改 theme.json 来定制主题。也可以在 TuiCollector 中传入 theme 选项覆盖自动检测：

TuiCollector({
    theme: { /* 自定义主题 */ }
})

引入样式

插件会自动处理 App.uvue 和 main.uts 的依赖注入，无需手动配置。在 App.uvue 中直接使用元子化样式即可。插件会在编译时自动完成以下工作：

• 自动引入 autocss.css 样式文件
• 自动注入 Tui 依赖到 main.uts
• 自动检测并创建国际化配置（locale 目录）
• 自动检测 tsconfig.json，若不存在则创建默认配置

使用样式

在模板中使用元子化样式类：

<view class="tbg-pn tp-m">
  <text class="ttl1">Hello World</text>
</view>

文档导航

• 介绍：了解 tui-vitex 的基本概念和核心功能
• 快速开始：快速上手 tui-vitex 的使用方法
• 元子化样式：学习如何使用元子化样式类
• 主题配置：配置和管理应用主题
• 环境变量：使用 Vite 风格的环境变量
• 组件编译增强：了解组件的编译期优化
• 条件编译：处理跨平台差异
• 使用示例：查看各种使用场景的示例
• 相关文件：了解编译器的内部结构

开始探索

选择左侧菜单中的任意章节，开始探索 tui-vitex 编译器的强大功能！

---

tui-vitex 为 UniApp X 提供了一套强大的编译期增强解决方案

让开发效率和代码质量提升到新的高度！ 🚀