手册版本 V5.0

视频教程推荐

我们为您准备了视频版的框架部署教程，非常建议您观看，会帮助您快速入门，请在 "GraceUI已付费用户群" 内下载视频观看。

框架目录结构

|_ 项目根目录
    |_ components // 自定义组件目录
    |_ GraceUI5 // GraceUI 框架核心目录
        |_ components // GraceUI 组件目录
        |_ css // GraceUI .css 文件目录
            |_ graceUI.css // 核心通用样式文件
            |_ animate.css // 动画样式库
        |_ js // js 相关文件目录
        |_ skin // 皮肤样式目录
            |_ black.css // 黑色主题
    |_ pages // 页面文件目录
    |_ static // 静态文件目录
        |_ grace.ttf // GraceUI 图标字体文件
    |_ app.vue // 项目入口 ( 初始化样式，加载字体 )
    |_ pages.json // 页面配置文件
    |_ ...... // 其他文件，遵循 uni-app 目录规范

核心样式部署

<script>
export default {
	onLaunch: function() {
		// #ifdef APP-PLUS
		//锁定屏幕
		plus.screen.lockOrientation('portrait-primary');
		const dom = weex.requireModule('dom');
		dom.addRule('fontFace', { 
			'fontFamily': "graceIconfont",
			'src': "url('/static/grace.ttf')"
		});
		// #endif
	},
	onShow: function() {},
	onHide: function() {}
}
</script>
<style>
/* 加载框架核心样式 */
@import "./GraceUI5/css/graceUI.css";
/* 加载主题样式 */
@import "./GraceUI5/skin/black.css";
/* 加载图标字体 - 条件编译模式 */
/* #ifdef APP-NVUE */
.gui-icons{font-family:graceIconfont;}
/* #endif */
</style>

组件自动加载

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

graceUI 5.0 实现自动加载

在 pages.json 内添加以下代码 ( 下载 GraceUI 框架时 page.json 已经写好 ) :  

"easycom": {
	"custom": {
		"autoscan": true,
		"gui-(.*)": "@/GraceUI5/components/gui-$1.vue"
	}
}

样式二次开发

核心建议 : 
01. 不修改 GraceUI 框架的核心源码，当 GraceUI 升级时可以直接使用框架核心文件包覆盖旧文件。
02. 使用样式复写的方式修改 GraceUI 内置样式，如 : 
在 app.vue 的 style 标签内或自定义一个样式文件 :
.gui-text{color:#A5A7B2; font-size:18rpx;}
03. 添加自己的样式，如 : 
.color-black{color:#333333;}
.color-red{color:#FF0036;}
04. 可以利用条件编译编写不同平台的样式 如 : 修改导航组件 
/* #ifndef APP-PLUS-NVUE */
navigator{opacity:1; background:none;}
.navigator-hover{background-color:none; opacity:0.8;}
/* #endif */

组件二次开发

如果我们提供的组件不能满足您的项目需求，您可以 :
01. 将GraceUI 的组件 [ /GraceUI5/components/某个组件.vue ] 复制到 根目录的组件中 [ /根目录/components/自定义组件/自定义组件.vue 可以实现自动加载 ];
02. 修改新的组件然后调用;
建议您一定要这样做，不要改写任何GraceUI组件的源码，这样才能保证您顺利进行框架版本升级哦 ~

快速部署

使用下载项目为基础
答 : 下载框架后解压得到的文件夹直接拖进 HX 编辑器运行即可;

将 GraceUI 部署到已有项目
1 将 GraceUI 文件夹复制到您项目的根目录；
2 将 static 文件夹内的 字体文件复制到您项目的根目录；
3 打开下载的 app.vue，参考样式及字体引入代码，将其编写到您的 app.vue 中；