uni-app GraceUI6.0 正式发布！支持Vue3 nvue 150+组件及模板（组件+布局+模板+JS工具库）、兼容性极好（1万+ 开发者真实项目反馈）。从1.0到6.0 期待与您美好相遇~

uni-app GraceUI6.0 正式发布！支持Vue3 nvue 150+组件及模板（组件+布局+模板+JS工具库）、兼容性极好（1万+ 开发者真实项目反馈）。从1.0到6.0 期待与您美好相遇~

GraceUI 6.0 宣传图

2022年06月13日 GraceUI 6.0 版本正式发布

GraceUI 是一款成熟完善的、为uni-app量身打造的优秀的UI框架！经过近4年的维护已经成为组件多、界面丰富、运行稳定的 uni-app 专业UI框架！

GraceUI 第一版发布于2018年9月，4年多来我们一直坚持收集反馈，高效、高频更新！从1.0到6.0 GraceUI 已经变得更加丰富、兼容性更好~

在此也感谢近万名使用者的一路相伴，感谢你们的支持与反馈~

官网 : https://www.graceui.com/

GraceUI 6.0 宣传图

1. 丰富的组件及样式

1.1 基础布局组件及样式

  • 页面布局 · Flex布局 · 元素定位 · 文本颜色 · 背景样式 · 阴影效果 · 圆角边框 · 文本样式 · 内置图标 · 样式动画

1.2 常用布局

  • 宫格布局 · 头部导航 · 底部导航 · 切换导航 · 吸顶容器 · 动态吸顶 · 通用列表 · 滑动列表 · 新闻列表 · 评论列表 · 图文卡片 · 名片卡片 · 滚动区域 · 遮罩弹层 · 局部选项卡 · 全屏选项卡 · 分段切换 · 折叠面板 · 普通表格 · 数据表格 · 分类展示 · 横向公告 · 返回顶部 · 弹出菜单 · 功能菜单 · 时间轴 · 侧边抽屉 · 图标分类 · 横向日期

1.3 加载组件

  • 加载组件 · 全屏加载 · 下拉刷新 · 刷新组件 · 上拉加载

1.4 常用组件

  • 徽章组件 · 标签组件 · 滚动公告 · 无缝滚动 · 按钮组件 · 进度按钮 · 搜索组件 · 星级评价 · 通用标题 · 倒计时 · 轮播组件 · 日历时间 · 区间滑块 · 进度圆环 · 城市选择 · 地区联动 · 步骤提示 · 链接组件 · 优惠券组件 · 为空展示 · 图片选择 · 多图上传 · 头像群组 · 数值动画 · 日期时间选择 · 时间段选择器

1.5 对话框组件

  • 顶部消息框 · 模态对话框 · 底部对话框 · 底部消息框

1.6 表单相关

  • 表单元素 · 表单验证 · 数值框 · 数字键盘 · 可选标签 · 点选按钮 · 下拉选择

1.7 文章相关

  • 文本编辑器 · 编辑器解析 · 富文本加强 · 展开全文

1.8 JS 工具库

  • 时间转换 · 网络请求 · 随机数值 · md5转换 · 系统信息

1.9 常用界面库

  • 搜索界面 · 登录注册 · 个人中心 · 购物车 · 订单中心 · 图片剪裁 · 商品详情 · 图片懒加载 · 骨架加载 · 抽奖活动 · 瀑布流 · 选择问卷 · 地址列表 · 添加地址 · 证件上传 · 滚动推荐 · 短信验证 · 排行榜 · 商城套装 · 即时通讯

2. 强大的版本支持 业界首款成熟的基于uni-app 的 nvue UI 框架

GraceUI 6.0 基于 vue3.0 同时支持 nvue，为app端更流畅的体验提供了极大的便利~

nvue 普通版本基本同步，想优化您的app？添加一个 .nuve 复制 vue 代码即可迅速完成~

3. 更好的兼容性、更稳定

GraceUI 自发布以来已经有上万名使用者，在开发的过程中不断给我们最真实的反馈，我们更是以积极的心态面对每一个反馈，及时确认问题并及时修正（最快10分钟哦）~经过一年多的 “锤炼”，GraceUI 变得极度稳定、兼容性极好~ 感谢每一份反馈，感谢每一位支持者~

您不需要费力的去布局，有 GraceUI 就够了 ^_^

4. Grace.JS 化繁为简，只为热爱 ~

Grace.js 是 GraceUI 框架的 js 框架，目标是 " 简化您的 uni-app 及 微信小程序 api 操作，同时提供丰富、好用的 js 工具，大幅度提高您的开发效率" 。

5. 收费说明

GraceUI 6.0 版本售价 299元

收费只是最基本的维护开销，不是"赚钱的买卖"，我们更认为是您的一种信任，对于我们更多的是责任！所以这里不是淘宝，不是简单的交易！我们希望得到正向的反馈、正向的帮助，不断完善，最终成为"组件多、稳定性好" 的UI框架！

一次性收费永久免费更新 ~

官网 :

https://www.graceui.com/


更多关于uni-app GraceUI6.0 正式发布！支持Vue3 nvue 150+组件及模板（组件+布局+模板+JS工具库）、兼容性极好（1万+ 开发者真实项目反馈）。从1.0到6.0 期待与您美好相遇~的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app GraceUI6.0 正式发布！支持Vue3 nvue 150+组件及模板（组件+布局+模板+JS工具库）、兼容性极好（1万+ 开发者真实项目反馈）。从1.0到6.0 期待与您美好相遇~的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app GraceUI6.0 正式发布回复

尊敬的开发者们，

非常高兴地宣布，uni-app GraceUI6.0 版本现已正式发布！此次更新带来了对 Vue3 和 nvue 的全面支持，以及超过 150 个精心设计的组件和模板，涵盖了组件、布局、模板和 JS 工具库等多个方面。此外，基于 1 万+ 开发者的真实项目反馈，GraceUI6.0 在兼容性上达到了前所未有的高度。

下面，我将通过一些代码案例来展示 GraceUI6.0 的部分功能和组件使用方式，以便大家更好地了解和上手。

1. 安装与引入

首先，确保你已经安装了 uni-app 开发环境，并创建了一个新的项目。然后，你可以通过 npm 或 yarn 安装 GraceUI6.0：

npm install @uni-app/graceui@6.0.0 --save
# 或者
yarn add @uni-app/graceui@6.0.0

在项目的 main.js 文件中引入 GraceUI：

import { createApp } from 'vue';
import App from './App.vue';
import GraceUI from '@uni-app/graceui';
import '@uni-app/graceui/dist/index.css';

const app = createApp(App);
app.use(GraceUI);
app.mount('#app');

2. 组件使用示例

Button 组件

<template>
  <g-button type="primary" @click="handleClick">点击我</g-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮点击了',
        icon: 'success'
      });
    }
  }
};
</script>

Layout 布局组件

<template>
  <g-layout>
    <g-header>Header</g-header>
    <g-content>Content</g-content>
    <g-footer>Footer</g-footer>
  </g-layout>
</template>

3. JS 工具库示例

GraceUI6.0 还附带了一些实用的 JS 工具库函数，例如颜色处理函数：

import { hexToRgb } from '@uni-app/graceui/lib/utils';

const rgb = hexToRgb('#ff0000');
console.log(rgb); // { r: 255, g: 0, b: 0 }

结语

从 1.0 到 6.0，GraceUI 一直致力于为开发者提供更加高效、美观和易用的 UI 组件库。我们相信，此次的 6.0 版本将为大家带来更加出色的开发体验。期待在未来的项目中，与大家美好相遇，共同创造更多精彩的应用！

祝开发愉快！

回到顶部