unocss ui

UNOCSS-UI

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

(?, Derzeit nur chinesischer Blog verfügbar)

Englisch | 简体中文

Vorschau | Verwendung | Entwicklung | Beispiel

Dies ist eine VUE3 -Komponentenbibliothek, die auf UNOCSS basiert. Seine Einfachheit ist die größte Funktion, da fast alle Komponenten nur auf eine einzelne .vue -Datei angewiesen sind, ohne von zu viel anderem Code abhängig zu sein.

Euen Diese Komponentenbibliothek befindet sich noch im Bau und ist derzeit nur für Lernzwecke geeignet.

Vorschau

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

Verwendung

 pnpm add unocss unocss-ui @unocss/reset

Fügen Sie unocss-ui in Ihre Haupteintragsdatei hinzu.

 // 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' )

Anpassung

Sie können das Thema der Komponentenbibliothek anpassen, indem Sie die theme übergeben.

Derzeit wird nur eine Anpassung der Farben unterstützt, und Sie müssen die Farben der Palette verwenden.

 // 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 ( ) ,
  ] ,
} ) 

Entwicklung

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

Komponenten entwickeln und Vorschau -Komponenten.

pnpm dev:example

Projektstruktur

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

Das äußerste Wurzelmodul ist UNOCSS-UI-Monorepo, das die folgenden Submodule enthält:

• example : Für die Echtzeit-Vorschau während der Komponentenentwicklung sowie für ein Showcase-Projekt
• demo : Zum Testen, ob das verpackte Komponentenpaket normal ist (kann nicht für die Entwicklung der Entwicklung verwendet werden, da das importierte Paket nach der Verpackung erfolgt)
• @unocss-ui/components : Quellcode der Komponenten
• @unocss-ui/preset : Die für die eigenen Bedürfnisse der Komponentenbibliothek extrahierten UNOCSS-Voreinstellung
• unocss-ui : Die Eintragsdatei des Projekts, die sowohl auf @unocss-UI/Komponenten als auch @UNOCSS-UI/Preset verweist

Beispiel

• Dynamisch debuggierbare Dokumentation im Projekt enthalten: Beispiel
• Full-Stack-Verwaltungssystem basierend auf dieser Komponentenbibliothek: https://github.com/szluyu99/rabbit-admin