Installation

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

Usage

Custom UnoCSS config(unocss.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(),
  ],
})

Update pages.json file like below:

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

Or use @uni-helper/vite-plugin-uni-components to scan components automatically.

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

And then enjoy it. Just use a button component like this:

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

Acknowledgement

Tools

• UnoCSS

UI Frameworks

• Anu
• Element Plus
• Onu UI
• uView
• Vant

License

MIT License © 2022-PRESENT Neil Lee and all contributors.