Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ano-ui/ano-ui
轻量级、漂亮、快速的 UnoCSS 组件库
https://github.com/ano-ui/ano-ui
components miniprogram uniapp unocss vue vue-components vue3
Last synced: 2 days ago
JSON representation
轻量级、漂亮、快速的 UnoCSS 组件库
- Host: GitHub
- URL: https://github.com/ano-ui/ano-ui
- Owner: ano-ui
- License: mit
- Created: 2022-09-26T12:50:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-17T10:05:11.000Z (11 months ago)
- Last Synced: 2024-10-17T03:45:28.035Z (29 days ago)
- Topics: components, miniprogram, uniapp, unocss, vue, vue-components, vue3
- Language: Vue
- Homepage: https://ano-ui.netlify.app/
- Size: 1.79 MB
- Stars: 169
- Watchers: 2
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-uni-app - vue3 - ui/ano-ui) - 轻量级、漂亮、快速的 UnoCSS 组件库。 (UI 组件库)
README
Ano-UI
轻量级、漂亮、快速的 UnoCSS 组件库
## 安装
```bash
pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-applet
```
## 使用
配置 UnoCSS：
```ts
// 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` 文件：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"^A(.*)": "ano-ui/components/A$1/A$1.vue"
}
}
}
```
或者使用 [@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components) 自动导入组件。
```ts
// 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.
只需使用这样的按钮组件：
```html
Button
```
## 感谢
### 工具
- [UnoCSS](https://github.com/unocss/unocss)
### UI 框架
- [Anu](https://github.com/jd-solanki/anu)
- [Element Plus](https://github.com/element-plus/element-plus)
- [Onu UI](https://github.com/onu-ui/onu-ui)
- [uView](https://github.com/umicro/uView2.0)
- [Vant](https://github.com/youzan/vant)
## License
[MIT](https://github.com/ano-ui/ano-ui/blob/main/LICENSE) License © 2022-PRESENT [Neil Lee](https://github.com/zguolee) and all contributors.