vite-plugin-tx-ui

tx-ui 组件库的 Vite 插件，提供组件自动导入和类型声明生成功能。

• 📖 在线文档: http://txui.aypkq.com/#/

安装

npm install vite-plugin-tx-ui -D
# 或
pnpm add vite-plugin-tx-ui -D
# 或
yarn add vite-plugin-tx-ui -D

使用

方式一：HBuilderX 项目（推荐）

对于使用 HBuilderX 构建的 UniApp X 项目，只需将 tx-ui 放入 uni_modules 目录即可，无需额外配置。

组件会通过 uni_modules/tx-ui/package.json 中的 easycom 配置自动注册。

方式二：Vite 项目

// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { txui } from 'vite-plugin-tx-ui'

export default defineConfig({
  plugins: [
    uni(),
    txui()
  ]
})

配置选项

txui({
  // 组件前缀，默认 'tx'
  prefix: 'tx',
  
  // 是否自动导入组件，默认 true
  autoImport: true,
  
  // 组件库路径，默认 'uni_modules/tx-ui'
  componentsDir: 'uni_modules/tx-ui',
  
  // 是否生成类型声明，默认 true
  dts: true,
  
  // 类型声明文件输出路径，默认 'tx-ui.d.ts'
  dtsOutput: 'tx-ui.d.ts'
})

功能

1. 自动导入组件

插件会自动更新 pages.json 中的 easycom 配置，实现组件的自动导入。

<template>
  <!-- 无需手动导入，直接使用 -->
  <tx-button type="primary">按钮</tx-button>
  <tx-icon name="home" />
</template>

2. 类型声明生成

插件会自动生成 tx-ui.d.ts 文件，提供完整的组件类型支持。

// 自动生成的类型声明
declare module "vue" {
  export interface GlobalComponents {
    "tx-button": typeof import('./uni_modules/tx-ui/components/basic/tx-button/tx-button.uvue')['default']
    "tx-icon": typeof import('./uni_modules/tx-ui/components/basic/tx-icon/tx-icon.uvue')['default']
    // ... 更多组件
  }
}

组件列表

tx-ui 包含 77+ 个精心设计的组件：

• 基础组件: tx-icon, tx-button, tx-text, tx-image, tx-badge, tx-tag, tx-divider, tx-link, tx-space, tx-transition
• 布局组件: tx-row, tx-col, tx-grid, tx-grid-item, tx-layout, tx-sticky, tx-safe-area, tx-scroll-view
• 表单组件: tx-input, tx-textarea, tx-checkbox, tx-radio, tx-switch, tx-picker, tx-date-picker, tx-time-picker, tx-slider, tx-rate, tx-stepper, tx-form, tx-form-item 等
• 反馈组件: tx-toast, tx-loading, tx-modal, tx-dialog, tx-action-sheet, tx-notify, tx-overlay, tx-progress, tx-circle, tx-skeleton 等
• 导航组件: tx-navbar, tx-tabbar, tx-tabs, tx-sidebar, tx-steps, tx-breadcrumb, tx-back-top 等
• 展示组件: tx-cell, tx-card, tx-collapse, tx-swiper, tx-list, tx-avatar, tx-empty, tx-table, tx-tree 等
• 业务组件: tx-search, tx-pull-refresh, tx-load-more, tx-calendar, tx-countdown, tx-qrcode, tx-waterfall 等

License

MIT