{"id":8492557,"url":"https://cherryful.github.io/unocss-ui/","last_synced_at":"2025-08-02T10:31:31.929Z","repository":{"id":164487909,"uuid":"639956354","full_name":"cherryful/unocss-ui","owner":"cherryful","description":"A simple Vue3 component library based on Unocss.","archived":false,"fork":false,"pushed_at":"2024-11-12T06:48:28.000Z","size":2165,"stargazers_count":199,"open_issues_count":1,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-12T07:33:07.364Z","etag":null,"topics":["components","typescript","ui","unocss","vue","vue3"],"latest_commit_sha":null,"homepage":"https://cherryful.github.io/unocss-ui/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cherryful.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-12T16:03:31.000Z","updated_at":"2024-11-12T06:48:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"6b0f9502-09ce-4eba-8524-08d9649a1adb","html_url":"https://github.com/cherryful/unocss-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherryful%2Funocss-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherryful%2Funocss-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherryful%2Funocss-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherryful%2Funocss-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cherryful","download_url":"https://codeload.github.com/cherryful/unocss-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228465828,"owners_count":17924638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","typescript","ui","unocss","vue","vue3"],"created_at":"2024-04-24T00:09:41.711Z","updated_at":"2024-12-06T12:30:39.756Z","avatar_url":"https://github.com/cherryful.png","language":"Vue","funding_links":[],"categories":["UI Components"],"sub_categories":["Vue"],"readme":"# unocss-ui\n\n\u003e 作者关于组件库的博文介绍：\u003ca href=\"https://luzhenyu.blog.csdn.net/article/details/130799232\" target=\"_blank\"\u003e 基于原子化思想的 Vue3 组件库 UnoCSS UI\n\u003c/a\u003e\n\n[English](./README.md) | 简体中文\n\n\n| [预览](#预览) [使用](#使用)  | [开发](#开发) | [示例](#示例)\n\n这是一个基于 UnoCss 的 Vue3 组件库。其最大的特点是简单易用，几乎所有组件都只依赖于一个 `.vue` 文件，不需要太多其他代码的支持。\n\n\u003e ⚠️ 注意：这个组件库仍在开发中，目前仅适用于学习目的。\n\n## 预览\n\n\u003ca href=\"https://cherryful.github.io/unocss-ui/\" target=\"_blank\"\u003e\nhttps://cherryful.github.io/unocss-ui/\n\u003c/a\u003e\n\n## 使用\n\n\n```\npnpm add unocss unocss-ui @unocss/reset\n```\n\n在你的主入口文件中添加 `unocss-ui`\n\n\n```ts\n// main.ts\nimport '@unocss/reset/tailwind.css'\nimport 'unocss-ui/style.css'\nimport 'uno.css'\n\nimport unocssui from 'unocss-ui'\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).use(unocssui).mount('#app')\n```\n\n### 自定义\n\n你可以通过 `theme` 选项来自定义组件库的主题。\n\n\u003e 目前，仅支持自定义颜色，你必须使用调色板中的颜色。\n\n```ts\n// uno.config.ts\nimport { defineConfig, presetUno } from 'unocss'\nimport { colors } from 'unocss/preset-mini'\n\nimport { presetUnocssUI } from 'unocss-ui'\n\nexport default defineConfig({\n  theme: {\n    colors: {\n      primary: colors.red,\n      secondary: colors.orange,\n      accent: colors.yellow,\n      success: colors.green,\n      info: colors.blue,\n      warning: colors.indigo,\n      error: colors.violet,\n    },\n  },\n  presets: [\n    presetUno(),\n    presetUnocssUI(),\n  ],\n})\n```\n\n## 开发\n\n### 安装依赖\n\n```\ngit clone https://github.com/cherryful/unocss-ui\ncd unocss-ui\npnpm install\n```\n\n开发和预览组件库:\n\n```bash\npnpm dev:example\n```\n\n### 项目结构\n\n```bash\nunocss-ui-monorepo\n├── demo # testing build package\n│   ├── package.json\n│   └── ...\n├── example # real-time preview\n│   ├── package.json\n│   └── ...\n├── packages\n│   ├── components # source code of components\n│   │   ├── package.json\n│   │   └── ...\n│   ├── preset # extracted preset\n│   │   ├── package.json\n│   │   └── ...\n│   └── unocss-ui # entry file of the project\n│       ├── package.json\n│       └── ...\n├── package.json # monorepo root package.json\n├── pnpm-workspace.yaml\n└── ...\n```\n\n最外层的根模块是 `unocss-ui-monorepo`，其中包含了以下子模块：\n- `example`：用于开发组件时进行实时预览，以及作为一个示例项目展示\n- `demo`：用于测试打包后的组件包是否正常（不能用来做开发时预览，因为导入的是打包后的 package）\n- `@unocss-ui/components`：组件的源码\n- `@unocss-ui/preset`：根据组件库自身需求抽取出来的 UnoCSS 的预设\n- `unocss-ui`：项目的入口文件，在这里引用  `@unocss-ui/components` 和  `@unocss-ui/preset`\n\n\n## 示例\n\n- 项目中自带的 example 动态可调试文档：[example](https://github.com/cherryful/unocss-ui/tree/main/example)\n- 基于该组件库的全栈管理系统： [https://github.com/szluyu99/rabbit-admin](https://github.com/szluyu99/rabbit-admin)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/cherryful.github.io%2Funocss-ui%2F","html_url":"https://awesome.ecosyste.ms/projects/cherryful.github.io%2Funocss-ui%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/cherryful.github.io%2Funocss-ui%2F/lists"}