ano ui

ano-ui

가볍고 아름답고 빠른 UNOCSS 구성 요소 라이브러리

설치하다

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

사용

UNOCS 구성 :

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

UI 프레임 워크

• anu
• 요소 플러스
• ONU UI
• uview
• vant

특허

MIT 라이센스 © 2022-Present Neil Lee 및 모든 기고자.