unocss ui下載 - unocss ui源代碼下載

unocss ui

三方組件

1.0.0

下載

UNOCSS-UI

作者關於組件庫的博文介紹：基於原子化思想的vue3組件庫unocss ui
（？，目前，只有中文博客）

英語| 簡體中文

預覽|用法|發展|例子

這是基於UNOCSS的VUE3組件庫。它的簡單性是其最大的功能，因為幾乎所有組件都僅依賴一個.vue文件，而不會依賴太多其他代碼。

配x該組件庫仍在建設中，目前僅適用於學習目的。

預覽

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

最外面的根模塊是unocs-ui-monorepo，其中包含以下子模塊：