GraceUI 框架部署 v6.x

框架部署v6.x

视频教程推荐

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

注意事项

GraceUI 6.0 必须基于 vue3 环境，请打开 manifest.json > 基础配置 > Vue 版本选择 > 选择 3.0 版本。

您还没有掌握 vue3 ？
没关系继续使用 vue2 的语法开发就好了 ~

想学习 vue3 ?
资料推荐 :
lesscode 文本教程 : https://www.lesscode.work/courses
b 站搜索 vue3 教程

框架目录结构

|_ 项目根目录
    |_ components // 自定义组件目录
    |_ custom // 自定义文件目录，包含 : 样式及自定义配置
    |_ Grace6 // GraceUI 框架核心目录
        |_ components // GraceUI 组件目录
        |_ css // css 文件目录
        |_ js // js 相关文件目录
        |_ font // 字体文件目录
        |_ demoData // 演示数据
    |_ pages // 页面文件目录
    |_ static // 静态文件目录
    |_ app.vue // 项目入口 ( 初始化样式，加载字体 )
    |_ pages.json // 页面配置文件
    |_ ...... // 其他文件，遵循 uni-app 目录规范

App.Vue 中加载核心样式及字体

<script>
export default {
onLaunch: function() {
// #ifdef APP-PLUS
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
'fontFamily': "graceuiiconfont",
'src': "url('https://at.alicdn.com/t/c/font_823462_whtuj4ktcl.ttf?t=1703075468532')"
});
console.log("字体加载成功");
// #endif

// #ifdef MP-WEIXIN
wx.onNeedPrivacyAuthorization(function(e){
console.log(e);
})
// #endif
},
onShow: function(){},
onHide: function(){}
}
</script>

<!-- #ifndef APP-NVUE -->
<style lang="scss">
/* 加载框架核心样式 */
@import "./Grace6/css/grace.scss";
/* 加载深色模式适配样式 */
@import "./Grace6/css/graceDark.scss";
/* 加载自定义样式 */
@import "./custom/custom.scss";
page{background:#F8F8F8;}
</style>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<style lang="scss">
/* 加载框架核心样式 */
@import "./Grace6/css/grace.scss";
/* 加载自定义样式 */
@import "./custom/custom.scss";
.gui-icons{font-family:graceuiiconfont; font-style:normal;}
</style>
<!-- #endif -->

组件自动加载

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

graceUI 6.0 实现自动加载

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

"easycom": {
	"autoscan" : true,
	"custom": {
		"gui-(.*)" : "@/Grace6/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 的组件 [ Grace6/components/某个组件.vue ] 复制到根目录的组件中 [ /根目录/components/自定义组件/自定义组件.vue 可以实现自动加载 ];
02. 修改新的组件然后调用;
建议您一定要这样做，不要改写任何GraceUI组件的源码，这样才能保证您顺利进行框架版本升级哦 ~

快速部署

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

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

手册版本 V6.0