Tui Plus Vapor

Appearance

介绍 ​

tui-vitex 是 tui-plus-vapor 的编译期能力入口，它不只是元子化样式生成工具，也不是一个单纯的样式插件，而是围绕 uni-app x / uni-app x vapor 场景做的一层编译增强。

核心功能：

  • 🎨 元子化样式生成：在编译阶段收集并生成原子化 CSS 类
  • 🎯 主题配置：支持主题变量和多主题切换
  • 🔧 环境变量：支持 Vite 风格的环境变量配置
  • ⚡ 组件编译增强：对特定组件进行编译期优化
  • 🔄 条件编译：支持跨平台条件编译
  • 📦 依赖自动注册：辅助处理组件依赖

适用场景：

  • 需要高效样式管理的 uni-app x 项目
  • 追求开发效率和代码质量的团队
  • 需要跨平台兼容的复杂应用
  • 对构建性能有要求的大型项目

目录结构：

uni_modules/tui-vitex/
├── main.js              # 插件主入口
├── utils/
│   ├── autocss.js       # 元子化样式处理
│   ├── compiler.js      # 编译器核心
│   ├── theme.js         # 主题配置
│   └── buildstart.js    # 构建启动处理
└── modules/
    ├── compiler.js      # SFC 编译器
    └── dotenv.js        # 环境变量支持

接入方式：

在 vite.config.ts 中通过 Vite 插件形式接入：

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

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

工作原理 ​

tui-vitex 的工作流程如下：

  1. 构建启动：在 Vite 构建开始时初始化配置和清理缓存
  2. 代码转换：对 .uvue 文件进行编译处理
  3. 样式提取：从模板和脚本中提取元子化样式类
  4. 样式生成：根据提取的类名生成对应的 CSS 代码
  5. 主题处理：结合 theme.json 处理主题变量
  6. 代码增强：对特定组件进行编译期优化
  7. 产物输出：将生成的样式输出到目标文件

通过这种编译期增强的方式，tui-vitex 可以在不增加运行时开销的情况下，提供更强大的开发体验和更优质的代码产物。