前言
- 📦 开箱即用项目结构：包含常用模块划分: hooks、utils、store、页面模板
- 🎨 内置主题系统：与华玥组件库无缝对接，支持一键切换明暗模式、动态主题色
- 🔌 网络请求封装：封装 uni.request，自动携带 token、错误提示、loading 管理
- 🚀 跨端适配完善：APP / H5 / 微信小程序 / 支付宝小程序
- 🧩 内置常用业务模板：如底部提交页、金额、tabBar 页面等
- 🛠 TypeScript 全面支持：接口定义、类型提示更完善
华玥组件库：vue3+ts多端UI优选方案，邀您Star支持！
在多端开发场景中，开发者常面临组件风格不统一、适配成本高、定制化难等问题。而华玥组件库（官网：www.hy-design-uni.top/ ）的出现，恰好打破了这些困境——它不仅是聚集多方功能的丰富UI组件库，更以酷炫外观、快捷体验、高可用特性，成为vue3+ts项目的高效开发助手，全方位覆盖多端开发需求。
| 类型 | 地址 | 备注 |
|---|---|---|
| 官方网站 | www.hy-design-uni.top | 组件库对外展示入口，标注 “多生态、丰富的移动端 UI 组件库”，支持直接访问 |
| 官方网站（备用网址） | hy-component-docs-git-master-gxhs-projects-3b22aa0e.vercel.app/ | 组件库对外展示入口，标注 “多生态、丰富的移动端 UI 组件库”，支持直接访问 |
| 源码仓库（GitHub） | github.com/MrGao-hy/hy… | 公开仓库，可直接查看源码、下载、提 Issues，基于 Vue3+TS+UniApp 开发 |
| 作者 CSDN 主页 | blog.csdn.net/weixin_6834… | 作者分享组件库实战、跨端开发技巧，可咨询技术问题 |
| npm 源码包 | www.npmjs.com/package/hy-… | npm 包中存储编译后的组件库源码 |
一、颜值与定制兼具，视觉体验更灵活
华玥组件库在视觉设计与个性化定制上双管齐下，既能满足项目的美观需求，又能适配不同场景下的风格差异。
1. 组件设计：精美简洁，上手零门槛
组件均经过精心打磨，摒弃冗余样式，保留核心功能与美观设计。无论是基础的按钮、表单，还是复杂的弹窗、导航栏，都能直接融入项目，无需额外调整基础样式，大幅减少样式调试时间，让开发者专注于业务逻辑开发。
2. 主题定制：随心定义，适配多场景
-
自定义主题色：支持一键替换全局主题色，无论是企业品牌专属色，还是个人项目个性化配色，都能精准适配，让项目视觉风格独树一帜，强化品牌辨识度。
-
明暗模式切换：原生支持亮色、暗色双模式，白天用亮色模式清晰护眼，夜间用暗色模式降低视觉疲劳，无需额外开发，轻松适配用户不同使用环境的需求。
二、vue3+ts技术底座，多端适配无压力
依托主流且稳定的技术栈，华玥组件库实现了性能与兼容性的双重保障，同时打破多端开发的壁垒，实现“一套代码，多端复用”。
1. 技术栈：富生态加持，开发更安心
基于vue3+ts开发，充分利用Vue3的Composition API、响应式优化等特性，让组件运行更流畅、性能更优越；搭配TypeScript的类型安全机制，能在编码阶段提前规避类型错误，减少调试成本，同时提升代码可维护性，方便团队协作。
2. 多端适配：覆盖全场景，开发效率翻倍
完美支持H5、APP、微信小程序、支付宝小程序等主流平台，借助底层技术优化，组件在不同平台上保持一致的外观与功能。无需为每个平台单独编写代码，一套组件即可覆盖多端需求，大幅降低跨平台开发工作量，提升项目落地速度。
三、安装&使用
准备工作
- 推荐 Node.js 版本：≥16.14.0。
- 推荐sass依赖版本：1.78.0>=sass>=1.53.0，
- 如果项目中没有按照sass，需要安装 sass依赖包
pnpm add -D sass@1.53.0
- 时间选择器依赖 dayjs
pnpm add dayjs
安装
npm install hy-app
# 或
pnpm add hy-app
# 或
cnpm install hy-app
# 或
yarn install hy-app
按需/自动化引入（推荐）
在 pages.json 中配置 easycom
{
"easycom": {
"custom": {
"^hy-(.*)": "hy-app/components/hy-$1/hy-$1.vue"
}
}
}
导入scss文件
在uni.scss最顶部引入这些文件
@use "hy-app/libs/css/theme.scss" as *;
@use "hy-app/libs/css/common.scss" as *;
@use "hy-app/libs/css/mixin.scss" as *;
四、丰富功能+实用工具，开发资源更全面
华玥组件库不止是“组件集合”，更配套了一系列实用工具与资源，从项目启动到功能拓展，全方位助力开发流程。
1. 配套工具：降低开发门槛，加速项目落地
- H5项目模板：提供基于uniapp+vue3搭建的旅游打卡H5项目模板，包含页面布局、交互逻辑、数据展示等基础模块，可直接复用或二次开发，快速启动H5项目。
- 工具箱站点：整合开发常用小工具，涵盖格式转换、代码压缩、接口调试等功能，无需额外寻找第三方工具，在组件库生态内即可完成大部分开发辅助工作。
- 合作功能库：与博主fruge365联合推出钉钉机器人消息库、websocket库，成熟功能直接调用，无需从零开发，轻松实现消息推送、实时通信等需求，降低技术实现难度。
2. 未来规划：持续迭代，生态更完善
目前组件库核心功能已全面覆盖，后续将持续迭代，扩充更多业务场景组件。
五、诚邀Star支持，共建优质生态
华玥组件库的成长离不开每一位开发者的支持！如果您认可这款组件库的功能与价值，欢迎访问华玥组件官网了解更多详情，并前往项目的GitHub仓库点亮Star。您的每一个Star，都是我们持续优化功能、完善生态的动力，也能让更多开发者发现这款高效的多端UI解决方案，共同推动组件库生态的发展！
无论是个人项目快速落地，还是企业级应用开发，华玥组件库都能成为您的得力助手。现在就行动起来，体验高效开发的便捷，同时用Star支持我们，一起打造更优质的开发工具！
👉 欢迎大家给华玥组件库star。 :white_check_mark:
