xiayulu / ano-ui

A lightweight UI components for UniApp(Vue3) using UnoCSS(WIP). 一个使用 UnoCSS 的 UniApp(Vue3) 的轻量 UI 组件库（施工中）。

Ano-UI (WIP)

An UniApp UI components with UnoCSS.

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>

Preview

WeChat

Probably not the latest version.

WeChat DevTools(Recommended)

You can see the preview by the following commands:

pnpm i

Run playground to see the result.

pnpm play:mp-weixin

Then import the project(xx/ano-ui/playground/dev/mp-weixin) into WeChat DevTools.

Acknowledgement

Tools

• UnoCSS

UI Frameworks

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

License

MIT License © 2022-PRESENT Neil Lee