unocss ui

unocss-ui

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

(?, Atualmente, apenas o blog chinês disponível)

Inglês | 简体中文

Visualização | Uso | Desenvolvimento | Exemplo

Esta é uma biblioteca de componentes VUE3 baseada em unocss. Sua simplicidade é o seu maior recurso, pois quase todos os componentes dependem apenas de um único arquivo .vue , sem depender de muito outro código.

️ Esta biblioteca de componentes ainda está em construção e atualmente é adequada apenas para fins de aprendizado.

Visualização

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

Uso

 pnpm add unocss unocss-ui @unocss/reset

Adicione unocss-ui no seu arquivo 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' )

Personalização

Você pode personalizar o tema da biblioteca de componentes passando a opção theme .

Atualmente, apenas a personalização das cores é suportada e você deve usar as cores da 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 ( ) ,
  ] ,
} ) 

Desenvolvimento

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

Desenvolva e visualize componentes.

pnpm dev:example

Estrutura do projeto

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
└── ...

O módulo radicular mais externo é unocss-ui-monorepo, que contém os seguintes sub-módulos:

• example : para visualização em tempo real durante o desenvolvimento de componentes, bem como um projeto de vitrine
• demo : para testar se o pacote de componentes embalados é normal (não pode ser usado para visualização de desenvolvimento, porque o pacote importado é após a embalagem)
• @unocss-ui/components : código-fonte dos componentes
• @unocss-ui/preset : o Unocss predefinido extraído para as próprias necessidades da biblioteca de componentes
• unocss-ui : o arquivo de entrada do projeto, referenciando @unocss-ui/components e @unocss-ui/predefinir

Exemplo

• Documentação dinamicamente degível incluída no projeto: Exemplo
• Sistema de gerenciamento de pilha completa com base nesta biblioteca de componentes: https://github.com/szluyu99/rabbit-admin