ano ui

ano-ui

مكتبة مكون خفيفة الوزن ، جميلة وسريعة UNICSS

ثَبَّتَ

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

يستخدم

تكوين 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 ( ) ,
  ] ,
} )

قم بتحديث ملف pages.json مثل هذا:

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

أو استخدم @uni-helper/vite-plugin-uni-components لاستيراد المكونات تلقائيًا.

 // 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 ( ) ] ,
    } ) ,
  ] ,
} )

ثم استمتع بها.

فقط استخدم مكون زر مثل هذا:

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

شاكر

أداة

• unocss

إطار واجهة المستخدم

• آنو
• عنصر زائد
• onu ui
• Uview
• فانت

رخصة

معهد ماساتشوستس للتكن