ano ui

Ano-ui

Leichte, schöne und schnelle UNOCSS -Komponentenbibliothek

Installieren

pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-applet

verwenden

Konfigurieren Sie UNOCSS:

 // uno.config.ts
import { defineConfig , presetIcons } from 'unocss'

// unocss-applet https://github.com/unocss-applet/unocss-applet
import { presetApplet , presetRemRpx , transformerApplet } from 'unocss-applet'
import { presetAno } from 'ano-ui'

export default defineConfig ( {
  presets : [
    presetApplet ( ) ,
    presetRemRpx ( ) ,
    presetIcons ( {
      scale : 1.2 ,
      extraProperties : {
        'display' : 'inline-block' ,
        'vertical-align' : 'middle' ,
      } ,
    } ) ,
    presetAno ( ) ,
  ] ,
  transformers : [
    transformerApplet ( ) ,
  ] ,
} )

Aktualisieren Sie die Datei pages.json wie folgt:

{
  "easycom" : {
    "autoscan" : true ,
    "custom" : {
      "^A(.*)" : " ano-ui/components/A$1/A$1.vue "
    }
  }
}

Oder verwenden Sie @uni-helper/vite-plugin-uni-komponenten, um Komponenten automatisch zu importieren.

 // vite.config.ts
import { defineConfig } from 'vite'

import Components from '@uni-helper/vite-plugin-uni-components'
import { AnoResolver } from 'ano-ui'

// https://vitejs.dev/config/
export default defineConfig ( {
  // ...
  plugins : [
    // ...
    Components ( {
      include : [ / .vue$ / , / .vue?vue / ] ,
      dts : 'src/components.d.ts' ,
      resolvers : [ AnoResolver ( ) ] ,
    } ) ,
  ] ,
} )

Und dann genieße es.

Verwenden Sie einfach eine solche Knopfkomponente:

 < template >
  < AButton > Button </ AButton >
</ template > 

dankbar

Werkzeug

• Unocss

UI -Framework

• Anu
• Element Plus
• Onu UI
• Uview
• Vant

Lizenz

MIT-Lizenz © 2022-Präsententen Neil Lee und alle Mitwirkenden.