README

English | 简体中文 


Omi - Web Components 框架

- 📶 信号 Signal 驱动的响应式编程，reactive-signal强力驱动
- 🧱 TDesign Web 组件 & OMI 游乐场
- ⚡ 微小的尺寸，极速的性能
- 💗 目标 100+ 模板 & OMI 模板源码
- 🐲 OMI Form & OMI Form 游乐场 & Lucide Omi 图标
- 🌐 你要的一切都有: Web Components, JSX, Function Components, Router, Suspense, Directive, Tailwindcss...
- 💒 使用 Constructable Stylesheets 轻松管理和共享样式

tsx
import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {
  count.value++
}

function sub() {
  count.value--
}

@tag('counter-demo')
export class CounterDemo extends Component {
  static css = 'span { color: red; }'

  render() {
    return (
      <
        -
        {count.value}
        +
      
    )
  }
}


使用该组件:

tsx
import { h } from 'omi'
import './counter-demo'

render(, document.body)

// 或者
import { CounterDemo, Other } from './counter-demo'
// 当需要导入其他东西的时候，防止被 tree shaking
render(, document.body)

// 或者
document.body.appendChild(document.createElement('counter-demo'))


 安装

bash
npm i omi


快速创建 Omi + Vite + TS/JS 项目：

bash
$ npx omi-cli init my-app     或者创建js项目: npx omi-cli init-js my-app
$ cd my-app           
$ npm start            develop
$ npm run build        release


快速创建 Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS 项目：

bash
$ npx omi-cli init-spa my-app  
$ cd my-app           
$ npm start            develop
$ npm run build        release


 包

- 核心包
  - omi - Omi 框架的实现代码。
  - omi-form - 强大易用且跨框架的表单解决方案。
  - lucide-omi - Lucide 的 Omi 图标集合。
  - omiu - 希望打造最好的 web 组件。
  - omi-router - 创建单页应用。
  - omi-cli - 快速创建 Omi + Vite + TS/JS 项目。
- 入门套件 (未发布到 npm)
  - omi-elements - 官方推出 Tailwind Omi 套件。
  - omi-starter-spa - 快速创建单页应用(SPA)，内置了 Omi + OmiRouter + Tailwindcss + TypeScript + Vite + Prettier。
  - omi-starter-ts - 基于 Vite + Omi + TypeScript 的模板。
  - omi-starter-tailwind - 基于 Vite + Omi + TypeScript + Tailwindcss 的模板。
  - omi-starter-js - 基于 Vite + Omi + JavaScript 的模板。
  - omi-vue - Vue SFC + Vite + OMI + OMI-WeUI.
- 组件
  - omi-weui - Omi 版本的 WeUI。
  - omi-auto-animate - Omi 版本的 @formkit/auto-animate。
  - omi-suspense - 处理异步依赖。
- 指令  
  - omi-transition - 提供进入和离开动画。
  - omi-ripple - 用于为用户界面元素添加涟漪（ripple）效果。当用户与元素交互（例如点击按钮）时，涟漪效果会从交互点开始扩散开来。
- 综合性例子 (未发布到 npm)
  - snake-game-2tier - 基于 Omi Signal class 两层架构的贪吃蛇游戏。
  - snake-game-3tier - 基于 Omi 响应是函数三层架构的贪吃蛇游戏。
  - omi-tutorial - Omi 官方教程源代码。

如果你想帮助项目发展，可以先简单地与同行分享!

- Share via Dev.to%20Github%3A%5Bhttps%3A%2F%2Fgithub.com%2FTencent%2Fomi%5D(https%3A%2F%2Fgithub.com%2FTencent%2Fomi)%0A-%20%F0%9F%93%B6%20Signal-driven%20reactive%20programming%0A-%20%F0%9F%8E%89%20%5BTailwind%20Element%20Omi%20UI%20KIT%5D(https%3A%2F%2Fomi.cdn-go.cn%2Felements%2Flatest%2F)%0A-%20%E2%9A%A1%20Tiny%20size%2C%20Fast%20performance%0A-%20%F0%9F%8C%90%20Everything%20you%20need%3A%20Web%20Components%2C%20JSX%2C%20Router%2C%20Suspense%2C%20Directive%2C%20Tailwindcss...%0A-%20%F0%9F%92%AF%20Both%20object%20oriented%20programming(OOP)%20and%20data%20oriented%20programming(DOP)%20are%20supported%0A-%20%F0%9F%92