unocss ui 다운로드 - unocss ui 소스 코드 다운로드

unocss ui

타사 구성 요소

1.0.0

다운로드

UNOCSS-UI

作者关于组件库的博文介绍：基于原子化思想的 vue3 组件库 unocss ui
(?, 현재 중국어 블로그 만 사용할 수 있습니다)

영어 | 简体中文

미리보기 | 사용법 | 개발 | 예

UNOCS를 기반으로 한 VUE3 구성 요소 라이브러리입니다. 거의 모든 구성 요소가 너무 많은 다른 코드에 의존하지 않고 단일 .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이며 다음과 같은 하위 모듈을 포함합니다.