Ano-UI (WIP)
An UniApp UI components with UnoCSS.
Installation
pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-appletUsage
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>