@shellming/vite-ui v0.0.4

Vite UI

A modern UI component library built with Vite and React.

Installation

npm install vite-ui
# or
yarn add vite-ui
# or
pnpm add vite-ui

Usage

import { Button } from 'vite-ui';

function App() {
  return (
    <Button>Click me</Button>
  );
}

Features

• 🚀 Built with Vite
• 📦 TypeScript support
• 🎨 Modern design
• ⚡️ Lightweight and performant

License

MIT

Vite + TSX Web Components

这是一个使用 TSX 配合 Vite 开发 Web Components 的示例项目。该项目展示了如何在不依赖 React、Vue 等框架的情况下，利用 TSX 语法开发原生的 Web Components。

🚀 特性

• 无框架依赖：直接使用 Web 标准，没有额外的运行时依赖
• TypeScript 类型安全：全面的类型支持，提高开发体验
• TSX 语法：享受声明式编程的简洁和可读性
• Shadow DOM 封装：真正的样式和结构隔离
• 现代化构建工具：基于 Vite 的快速开发和构建

🛠️ 技术栈

• TypeScript：提供静态类型检查
• TSX：提供声明式 UI 描述语法
• Web Components：原生组件化方案
• Vite：快速的开发服务器和构建工具

📦 组件实现

项目包含两个基础组件示例：

• Button 按钮组件：支持多种样式变体和事件处理
• Card 卡片组件：支持头部、内容和底部插槽

🏗️ 项目结构

vite-ui/
├── src/                  # 源代码目录
│   ├── components/       # Web Components 组件
│   │   ├── Button.tsx    # 按钮组件
│   │   └── Card.tsx      # 卡片组件
│   ├── jsx-runtime.ts    # JSX 工厂函数实现
│   ├── jsx.d.ts          # JSX 类型定义
│   ├── index.tsx         # 应用入口
│   └── style.css         # 全局样式
├── index.html            # HTML 入口
├── vite.config.ts        # Vite 配置
├── tsconfig.json         # TypeScript 配置
└── package.json          # 依赖和脚本

🚦 开始使用

1. 克隆项目
2. 安装依赖：npm install
3. 运行开发服务器：npm run dev
4. 构建生产版本：npm run build

📚 开发自定义组件

要创建新的 Web Component，请按照以下步骤：

1. 在 src/components/ 目录下创建新的 TSX 文件
2. 使用 JSX 工厂函数 h 创建 DOM 元素
3. 创建继承自 HTMLElement 的类，并在 Shadow DOM 中渲染 JSX 组件
4. 使用 customElements.define() 注册组件
5. 在 src/index.tsx 中导入组件

🤔 为什么用 TSX 开发 Web Components？

• 简洁的描述性语法：比手动操作 DOM 更直观
• 类型安全：利用 TypeScript 提供的静态类型检查
• 开发体验：熟悉 React 的开发者可以无缝过渡
• 无运行时依赖：编译后是原生 DOM 操作，不需要额外框架

组件设计遵循以下原则： 1. 使用插槽实现内容灵活性 2. 提供合理的默认样式 3. 支持暗/亮模式切换 4. 响应式设计适配不同屏幕尺寸 5. 使用语义化的HTML标签并通过is属性扩展，提高SEO和可访问性