unocss ui

Unocss-ui

： 基于原子化思想的 Vue3 组件库 UNOCSS UI

(?, В настоящее время доступен только китайский блог)

Английский | 简体中文

Предварительный просмотр | Использование | Развитие | Пример

Это библиотека компонентов VUE3, основанная на UNOCSS. Его простота - его самая большая особенность, так как почти все компоненты полагаются только на один файл .vue , не в зависимости от слишком большого другого кода.

️ Эта библиотека компонентов все еще находится в стадии разработки и в настоящее время подходит только для учебных целей.

Предварительный просмотр

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

Использование

 pnpm add unocss unocss-ui @unocss/reset

Добавьте unocss-ui в свой основной файл входа.

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

Настройка

Вы можете настроить тему библиотеки компонентов, передав вариант theme .

В настоящее время поддерживается только настройка цветов, и вы должны использовать цвета палитры.

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

Разработка

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

Разработать и предварительно просмотреть компоненты.

pnpm dev:example

Структура проекта

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

Самым внешним корневым модулем является UNOCSS-UI-MONOREPO, который содержит следующие подмодулы:

• example : для предварительного просмотра в режиме реального времени во время разработки компонентов, а также проекта витрины
• demo : для проверки того, является ли упакованным компонентным пакетом нормальным (не может быть использован для предварительного просмотра разработки, поскольку импортированный пакет после упаковки)
• @unocss-ui/components : исходный код компонентов
• @unocss-ui/preset : предварительная установка UNOCSS, извлеченная для собственных потребностей библиотеки компонентов
• unocss-ui : Файл входа проекта, ссылаясь как @UnoCSS-UI/Components, так и @unocss-ui/preset

Пример

• Динамически отладкая документация, включенная в проект: пример
• Система управления полным стеком на основе этой библиотеки компонентов: https://github.com/szluyu99/rabbit-admin