تنزيل unocss ui - تنزيل رمز مصدر unocss ui

unocss ui

مكونات الطرف الثالث

1.0.0

تنزيل

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/مكونات و @unocss-ui/الإعداد المسبق