unocss ui

unocss-ui

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

(?, Actuellement, seul blog chinois disponible)

Anglais | 简体中文

Aperçu | Utilisation | Développement | Exemple

Il s'agit d'une bibliothèque de composants Vue3 basée sur unocss. Sa simplicité est sa plus grande fonctionnalité, car presque tous les composants ne reposent que sur un seul fichier .vue , sans dépendre de trop d'autres code.

️ Cette bibliothèque de composants est toujours en construction et ne convient actuellement qu'aux fins d'apprentissage.

Prévisualisation

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

Usage

 pnpm add unocss unocss-ui @unocss/reset

Ajoutez unocss-ui dans votre fichier d'entrée 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' )

Personnalisation

Vous pouvez personnaliser le thème de la bibliothèque de composants en transmettant l'option theme .

Actuellement, seule la personnalisation des couleurs est prise en charge et vous devez utiliser les couleurs de la palette.

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

Développement

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

Développer et prévisualiser les composants.

pnpm dev:example

Structure du projet

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

Le module racine le plus extérieur est unocsss-ui-monorepo, qui contient les sous-modules suivants:

• example : pour un aperçu en temps réel pendant le développement des composants, ainsi qu'un projet de vitrine
• demo : pour tester si le package des composants emballés est normal (ne peut pas être utilisé pour l'aperçu du développement, car le package importé est après l'emballage)
• @unocss-ui/components : code source des composants
• @unocss-ui/preset : le préréglage unocss extrait pour les propres besoins de la bibliothèque des composants
• unocss-ui : le fichier d'entrée du projet, faisant référence à la fois @ unocss-ui / composants et @ unocss-ui / préréglage

Exemple

• Documentation dynamiquement débordante incluse dans le projet: Exemple
• Système de gestion de stock complet basé sur cette bibliothèque de composants: https://github.com/szluyu99/rabbit-admin