轻量级、漂亮、快速的 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>