unocss uiダウンロード-UNOCSS unocss uiソースコードダウンロード

unocss ui

サードパーティ製コンポーネント

1.0.0

ダウンロード

UNOCSS-UI

作者关于组件库的博文介绍：基于原子化思想的vue3组件库unocss ui
（？、現在、利用可能な中国のブログのみ）

英語| 简体中文

プレビュー|使用法|開発|例

これは、UNOCSSに基づく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で、次のサブモジュールが含まれています。

example ：コンポーネント開発中のリアルタイムプレビューとショーケースプロジェクト
demo ：パッケージ化されたコンポーネントパッケージが正常であるかどうかをテストするために（インポートされたパッケージがパッケージング後にあるため、開発プレビューに使用できません）
@unocss-ui/components ：コンポーネントのソースコード
@unocss-ui/preset ：コンポーネントライブラリ自身のニーズに合わせて抽出されたUNOCSSプリセット
unocss-ui ： @unocss-ui/componentsと @unocss-ui/presetの両方を参照するプロジェクトのエントリファイル