unocss ui

UNOCSS-UI

作者关于组件库的博文介绍 ： 基于原子化思想的 Vue3 组件库 UNOCSS UI

(?, Actualmente, solo blog chino disponible)

Inglés | 简体中文

Vista previa | Uso | Desarrollo | Ejemplo

Esta es una biblioteca de componentes VUE3 basada en UNOCSS. Su simplicidad es su característica más importante, ya que casi todos los componentes dependen solo de un solo archivo .vue , sin depender de demasiado otro código.

️ Esta biblioteca de componentes todavía está en construcción y actualmente solo es adecuada para fines de aprendizaje.

Avance

https://cherryful.github.io/unocss-ui/

Uso

 pnpm add unocss unocss-ui @unocss/reset

Agregue unocss-ui en su archivo de entrada principal.

 // main.ts
import '@unocss/reset/tailwind.css'
import 'unocss-ui/style.css'
import 'uno.css'

import unocssui from 'unocss-ui'
import { createApp } from 'vue'
import App from './App.vue'

createApp ( App ) . use ( unocssui ) . mount ( '#app' )

Personalización

Puede personalizar el tema de la biblioteca de componentes pasando la opción theme .

Actualmente, solo la personalización de los colores es compatible, y debe usar los colores de la paleta.

 // uno.config.ts
import { defineConfig , presetUno } from 'unocss'
import { colors } from 'unocss/preset-mini'

import { presetUnocssUI } from 'unocss-ui'

export default defineConfig ( {
  theme : {
    colors : {
      primary : colors . red ,
      secondary : colors . orange ,
      accent : colors . yellow ,
      success : colors . green ,
      info : colors . blue ,
      warning : colors . indigo ,
      error : colors . violet ,
    } ,
  } ,
  presets : [
    presetUno ( ) ,
    presetUnocssUI ( ) ,
  ] ,
} ) 

Desarrollo

 git clone https://github.com/cherryful/unocss-ui
cd unocss-ui
pnpm install

Desarrollar y obtener componentes de vista previa.

pnpm dev:example

Estructura de proyectos

unocss-ui-monorepo
├── demo # testing build package
│   ├── package.json
│   └── ...
├── example # real-time preview
│   ├── package.json
│   └── ...
├── packages
│   ├── components # source code of components
│   │   ├── package.json
│   │   └── ...
│   ├── preset # extracted preset
│   │   ├── package.json
│   │   └── ...
│   └── unocss-ui # entry file of the project
│       ├── package.json
│       └── ...
├── package.json # monorepo root package.json
├── pnpm-workspace.yaml
└── ...

El módulo de raíz más externo es UNOCSS-UI-Monorepo, que contiene los siguientes submódulos:

• example : para la vista previa en tiempo real durante el desarrollo de componentes, así como un proyecto de exhibición
• demo : para probar si el paquete de componentes empaquetados es normal (no se puede utilizar para la vista previa del desarrollo, porque el paquete importado es después del empaque)
• @unocss-ui/components : código fuente de los componentes
• @unocss-ui/preset : el preajuste de la UNOCSS extraído para las propias necesidades de la biblioteca de componentes
• unocss-ui : el archivo de entrada del proyecto, haciendo referencia a @Unocss-UI/Components y @Unocss-UI/Preset

Ejemplo

• Documentación debuggable dinámicamente incluida en el proyecto: Ejemplo
• Sistema de gestión de stack basado en esta biblioteca de componentes: https://github.com/szluyu99/rabbit-admin