ano ui

ano-ui

ไลบรารีส่วนประกอบที่มีน้ำหนักเบาสวยงามและรวดเร็ว

ติดตั้ง

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 เพื่อนำเข้าส่วนประกอบโดยอัตโนมัติ

 // 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

กรอบ UI

• Anu
• Element Plus
• onu ui
• Uview
• รั่วไหล

ใบอนุญาต

ใบอนุญาต MIT © 2022- ปัจจุบัน Neil Lee และผู้มีส่วนร่วมทั้งหมด