账户中心 退出系统
使用手册 模板中心 账户中心
快速开始
常见问题
下载框架
快速部署
组件调用手动调用
自动加载easycom
NVUE 说明
更新日志
版权要求
设计规范初版
基础布局 ( 6 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
竖向切换动态切换
元素定位
手势识别
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 25 )
宫格布局九宫格
头部导航
底部导航
切换导航单行模式
切换导航多行模式
吸顶容器
动态吸顶
名片卡片
滚动区域
局部选项卡
全屏选项卡模式一原理演示
全屏选项卡模式二原理演示
全屏选项卡实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
弹出菜单
功能菜单
时间轴
侧边抽屉
图标分类
常用列表 ( 10 )
通用列表
滑动列表新版组件模式
滑动列表旧版本保留
新闻列表
评论列表
图文列表
树状列表
拖拽排序竖向
可选列表单选 | 多选
全选列表多选 | 全选
常用组件 ( 26 )
徽章组件
圆角组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
搜索组件
星级评价
通用标题更多、换一批
倒计时
轮播组件新版本 更好用
轮播组件组件模式
轮播组件原生模式
区间滑块
进度圆环
城市选择
地区联动新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择
多图上传
头像群组
数值动画
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新原生模式
刷新组件滚动区域模拟模式
上拉加载原生模式
模态弹框 ( 6 )
遮罩弹出层
顶部消息框
模态对话框
底部对话框
底部消息框
底部操作表
表单相关 ( 10 )
表单元素
表单验证
数值框
数字键盘
可选标签 单选 多选
可选标签 携带数据
可删标签
点选按钮
下拉选择
滑动解锁
日期时间 ( 5 )
日期及时间带有农历
日期区间日历形式
日期及时间pickr模式
时间段选择pickr模式
横向日期
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息
常用界面 ( 21 )
搜索界面
登录注册
个人中心
头像裁剪
购物车
订单中心
条件筛选
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯
使用easycom实现组件自动加载

easycom 介绍 ( 基于 HBuilder X 实现 )

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。
easycom将其精简为一步。只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构的组件。就可以不用引用、注册,直接在页面中使用。同时打包后会自动剔除没有使用的组件。

graceUI 实现 easycom

1、更新 graceUI 框架 ( 2020-03-05 之后的版本 )
2、在 pages.json 内添加以下代码 : 

{
    ......
    "easycom": {
        "custom": {
            "grace(.*)": "@/graceUI/components/grace$1.vue"
        }
    }
}

具体位置您可以在已下载的 graceUI 文件包内打开 pages.json 参考;
3、在页面中使用组件:

vue 模式 : <grace组件名称></grace组件名称>, 如 : <gracePage></gracePage>
nvue 模式 : <graceNvue组件名称></graceNvue组件名称>, 如 : <graceNvuePage></graceNvuePage>

nuve 模式说明

因插件底层不支持 .nvue 文件, 我们将框架的 .nuve 组件重命名为 .vue  并部署到 graceUI/components/ 文件夹下,编写 easycom 规则实现了 nvue 组件的自动加载!
注意 : 
旧项目编译时控制台会报出 css 错误,可以忽略此错误,不影响项目正常运行。如果想彻底解决误报旧项目请删除所有页面的手动组件引入。

普通模式的使用范例

<template>
	<gracePage headerBG="#F2F2F2" borderWidth="1px" borderColor="#D1D1D1">
		<!-- 自定义头部导航 -->
		<view slot="gHeader" class="grace-header-body">
			<view class="grace-header-content grace-flex-center">自定义头部导航</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<view class="grace-blue">页面主体......</view>
		</view>
	</gracePage>
</template>
<script>
export default {}
</script>
<style>
</style>


nvue 模式的使用范例

<template>
	<graceNvuePage headerBG="#F2F2F2" borderWidth="1px" borderColor="#D1D1D1">
		<!-- 自定义头部导航 -->
		<view slot="gHeader" class="grace-header-body">
			<view class="grace-header-content grace-flex-center">
				<text class="grace-text">自定义头部导航</text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<text class="grace-blue grace-text">页面主体......</text>
		</view>
	</graceNvuePage>
</template>
<script>
export default {}
</script>
<style>
</style>