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/ส่วนประกอบและ @unocss-ui/preset

ตัวอย่าง

• เอกสารที่ถูกต้องแบบไดนามิกรวมอยู่ในโครงการ: ตัวอย่าง
• ระบบการจัดการแบบเต็มสแต็กตามไลบรารีส่วนประกอบนี้: https://github.com/szluyu99/rabbit-admin