shanksgx / ano-ui

轻量级、漂亮、快速的 UnoCSS 组件库

Ano-UI

轻量级、漂亮、快速的 UnoCSS 组件库

安装

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

And then enjoy it.

只需使用这样的按钮组件：

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

感谢

工具

• UnoCSS

UI 框架

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

License

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