一、创建项目

1、打开AppCube官网

https://www.huaweicloud.com/product/appcube.html

2、点击“立即使用”进入AppCube控制台

3、点击“进入开发环境”按钮

4、选择“轻应用”进行项目创建

5、点击“创建空白轻应用”按钮

6、录入“标签”和“名称”，点击“创建”按钮

7、项目创建成功后，自动进入项目开发环境，至此项目创建完成

二、开发第一个页面-首页

1、创建页面

（1）点击Page后面的加号，添加标准页面

（2）输入页面“标签”和“名称”，点击”添加“按钮

（3）创建完成后进入页面编辑界面

2、素材准备

（1）准备图片素材，博主所有素材均来自华为云AppCube官网和阿里巴巴iconfont图标库

（2）在界面拖放一个图片控件，选中该控件，点击右侧属性中的图片地址的小齿轮，可以打开图片上传界面

（3）将所有素材图片上传

3、最外层容器布局

（1）拖放两个容器组件到界面上，采用上下布局方式

（2）设置两个容器对齐方式为居中对齐

（3）设置两个容器的行内样式，样式代码如下：

容器一样式代码：

:root{
    background-image: url("//appcube.cn-north-4.huaweicloud.com/default/0000000000lIxrpH3z2u/assets/object/image/17b529851ea-6a3b5c18-2fb3-4af8-8385-adb407142418/1.0.0/eee.png");
    background-repeat: no-repeat;
    padding:31px 24px;
    width:100%;
}

说明：图片地址可以通过图片控件选中对应图片后，从图片地址中复制出来。

容器二样式代码：

:root{
	padding-top:30px;
}

效果如图：

（4）在”样式代码“选项卡中设置第一个容器的样式类（主要用于区分PC端样式和移动端样式），样式类ivu-background-image-height代码如下：

/* PC端样式（这里定义比较简单，屏幕宽度超过992px即认定为是PC端） */
@media (min-width: 992px) {
  .ivu-background-image-height{
    height: 450px;
    background-size: 100% 100%;
  }
}

/* 移动端样式（这里定义比较简单，屏幕宽度低于735px即认定为是移动端） */
@media (max-width: 735px) {
  .ivu-background-image-height{
    height: 200px;
    background-size: 100% 100%;
  }
}

PC端效果如图：

移动端效果如图：

说明：后续代码中内联样式放到”样式源码“下，样式类把类名放到对应控件的样式类下，多个用空格分开。

4、上半部分界面布局

（1）按如下布局拖放对应组件到界面

（2）设置”容器：container_2“的样式

内联样式：

:root{
    background-color: transparent;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0;
    padding-bottom:0;
}

样式类ivu-header-container-margin：

@media (min-width: 992px) {
  .ivu-header-container-margin{
    margin-top: 100px;
    padding-left: 40px;
  }
}

@media (max-width: 735px) {
  .ivu-header-container-margin{
    margin-top: 0;
  }
}

（3）设置”容器：container_3“的样式

内联样式：

:root{
    padding-bottom:0;
    padding-top:0;
    margin-top:18px;
    flex-direction:row;
    display:block;
    background-color: transparent;
    opacity:1;
}

（4）设置”容器：container_4“的样式

内联样式：

:root{
    padding-top:10px;
    padding-bottom:10px;
    background-color: transparent;
}

（5）设置”容器：container_5“的样式

内联样式：

:root{    background-color: transparent;}

（6）设置”标签：label_0“的样式

属性修改：文本内容改成”应用魔方“。

内联样式：

:root{    font-family:Arial, "Microsoft YaHei", sans-serif;    font-weight:700;    color:#252B3A;    margin-right:20px;}

样式类ivu-header-font：

@media (min-width: 992px) {  .ivu-header-font{    font-size:40px;    line-height:50px;  }}@media (max-width: 735px) {  .ivu-header-font{    font-size:24px;    line-height:30px;  }}

（7）设置”标签：label_1“的样式

属性修改：文本内容改成”AppCube“。

内联样式：

:root{    font-family:Arial, "Microsoft YaHei", sans-serif;    font-weight:700;    color:#252B3A;}

样式类ivu-header-font：与label_0共用。

（8）设置”标签：label_2“的样式

文本内容改成”轻松构建专业级应用，创新随心所欲，敏捷超乎想象“。（后续不再一一截图）

内联样式：

:root{    display: block;    color:#575D6C;    font-family:Arial, "Microsoft YaHei", sans-serif;}

样式类ivu-span-font：

@media (min-width: 992px) {  .ivu-span-font{    font-size:14px;    line-height:22px;  }}@media (max-width: 735px) {  .ivu-span-font{    font-size:12px;    line-height:18px;  }}

（9）设置”标签：label_3“的样式

属性修改：文本内容改成”—— 高效易用的低代码aPaaS平台“。

内联样式：

:root{    margin-top: 5px;    color:#575D6C;    font-family:Arial, "Microsoft YaHei", sans-serif;}

样式类ivu-header-font ivu-span-display：其中ivu-span-font与label_2共用。

@media (min-width: 992px) {  .ivu-span-display{    display: block;  }}@media (max-width: 735px) {  .ivu-span-display{    display: none;  }}

（10）设置”按钮：button_2“的样式

属性修改：显示名称改成”立即使用“，类型选择”文字按钮“，大小选择”小“。

内联样式：

:root{    color:#FFFFFF;    font-family:Arial, "Microsoft YaHei", sans-serif;    background-color:#C7000B;    border-color:#C7000B;    padding:0;    width:98px;    height:32px;    font-size:12px;    line-height:30px;    margin-right:12px;}

样式类ivu-btn-auto-margin：

.ivu-btn-auto-margin{    margin-right: 12px;}

（11）设置”按钮：button_3“的样式

属性修改：显示名称改成”价格详情“，类型选择”文字按钮“，大小选择”小“。

内联样式：

:root{    font-family:Arial, "Microsoft YaHei", sans-serif;    color:#252B3A;    border-color:#252B3A;    border-width:1px;    border-style:solid;    margin-top:0;    margin-left:auto;    margin-right:12px;    width:98px;    height:32px;    font-size:12px;    line-height:30px;}

样式类ivu-btn-auto-margin：与button_2共用。

（12）设置”按钮：button_4“的样式

属性修改：显示名称改成”智能客服“，类型选择”文字按钮“，大小选择”小“。

内联样式：

:root{    font-family:Arial, "Microsoft YaHei", sans-serif;    color:#252B3A;    border-color:#252B3A;    border-width:1px;    border-style:solid;    margin-top:0;    margin-left:auto;    margin-right:12px;    width:98px;    height:32px;    font-size:12px;    line-height:30px;}

样式类ivu-btn-auto-margin ivu-btn-display：其中ivu-btn-auto-margin与button_2共用。

@media (min-width: 992px) {  .ivu-btn-display{    display: inline;  }}@media (max-width: 735px) {  .ivu-btn-display{    display: none;  }}

（13）设置按钮鼠标悬浮的样式

.ivu-btn:hover{  opacity: 0.7;}/* 鼠标悬停设置边框和字体样式不生效，原因不祥 *//* .ivu-btn:hover{  border-color: #d64a52;  color: #d64a52;}*/

至此上半部分布局完成，总体效果如下：

PC端：

移动端：

5、下半部分界面布局

（1）按如下布局拖放对应组件到界面

说明：该界面共用到了三个”分栏“组件，每个分栏都有两栏，下面分别设置。

下述使用的标签名均以以上截图为准，实际操作过程中标签名称可能与博主的不一致，请自行修改，结构位置一致即可。

（2）设置”标题“的样式

属性修改：标题内容改成”产品价值“，标题类型改为”Heading 3“。

内联样式：

:root{    padding-left:27px;    padding-right:27px;    padding-top:0;    padding-bottom:0;    height:30px;    width:100%;    font-weight:700;    font-family:Arial, "Microsoft YaHei", sans-serif;    color:#252B3A;    margin-bottom:16px;}

样式类ivu-title-font：

@media (min-width: 992px) {  .ivu-title-font{    font-size:24px;  }}@media (max-width: 735px) {  .ivu-title-font{    font-size:18px;  }}

（3）设置”容器：container_6“的样式

属性修改：水平对齐方式改成”中“。

内联样式：

:root{    padding-left:15px;    padding-right:15px;    margin-left: auto;    margin-right: auto;}

样式类ivu-container-width：

@media (min-width: 992px) {  .ivu-container-width{    max-width: 1280px;  }}@media (max-width: 735px) {  .ivu-container-width{    min-width: 376px;  }}

（4）设置"分栏：row_1"的样式

内联样式：

:root{    margin-top: -1px;}

"分栏：row_2"的样式与”分栏：row_1“样式一致。

（5）设置"栏：col_0"的样式

属性修改：布局模式改成”弹性布局“，移动端配置-底边框设置为关闭。

内联样式：无。

样式类ivu-col-border-no：

@media (min-width: 992px) {  .ivu-col-border-no{      border: none;  }}@media (max-width: 735px) {  .ivu-col-border-no{      border: 1px solid #dfe1e6;      border-bottom: none;  }}

说明：“栏：col_2”、"栏：col_4"的样式与”栏：col_0“样式一致。

（6）设置"栏：col_1"的样式

属性修改：布局模式改成”弹性布局“，移动端配置-底边框设置为关闭。

内联样式：无。

样式类ivu-col-border：

@media (min-width: 992px) {  .ivu-col-border{      border: none;  }}@media (max-width: 735px) {  .ivu-col-border{      border: 1px solid #dfe1e6;  }}

说明：“栏：col_3”、"栏：col_5"的样式与”栏：col_1“样式一致。

（7）设置”图片：image_2“的样式

属性修改：设置图片地址（直接通过齿轮选择对应图片），设置图片宽高为48px*48px。

内联样式：

:root{    width:48px;    margin-top:30px;    margin-right:15px;    margin-left:15px;}

”图片：image_3“、”图片：image_4“、”图片：image_5“、”图片：image_6“、”图片：image_7“的样式与”图片：image_2“样式一致。

（8）设置"容器：container_7"的样式

内联样式：

:root{    margin-top:25px;    padding-bottom:25px;}

”容器：container_8“、”容器：container_9“、”容器：container_10“、”容器：container_11“、”容器：container_12“的样式与”容器：container_7“样式一致。

（9）设置”标签：label_4“的样式

属性修改：文本内容改成”降低应用构建门槛“。

内联样式：

:root{    font-family:Arial, "Microsoft YaHei", sans-serif;    font-weight:700;    font-size:16px;    line-height:24px;    color:#252B3A;    display: block;    margin-bottom:4px;}

”标签：label_6“、”标签：label_8“、”标签：label_10“、”标签：label_12“、”标签：label_14“除属性”文本内容“的值不一样外，其它的样式与”标签：label_4“样式一致，各个标签”文本内容“属性值如下：

标签：label_6文本内容：加速业务敏捷创新标签：label_8文本内容：保护企业已有投资标签：label_10文本内容：沉淀行业知识，快速复制标签：label_12文本内容：支撑大型企业级应用构建标签：label_14文本内容：全面可信，护航企业安全

（10）设置”标签：label_5“的样式

属性修改：文本内容改成”全云化线上开发，No Code/Low Code开发模式，多终端适配，所见即所得的大屏构建，图形化业务编排，具备极低的学习成本，让业务人员可直接构建应用，人人都是开发者“。

内联样式：

:root{    display: block;    font-family:Arial, "Microsoft YaHei", sans-serif;    font-size:14px;    color:#575D6C;    line-height:22px;}

样式类ivu-span-width：

@media (min-width: 992px) {  .ivu-span-width{    width: 500px;  }}@media (max-width: 735px) {  .ivu-span-width{    width: 240px;  }}

”标签：label_7“、”标签：label_9“、”标签：label_11“、”标签：label_13“、”标签：label_15“除属性”文本内容“的值不一样外，其它的样式与”标签：label_5“样式一致，各个标签”文本内容“属性值如下：

标签：label_7文本内容：拖拽式页面构建，简单易用的数据建模，灵活可视的服务编排、流程编排、事件编排，丰富的预置资产，积木式搭建应用效率提升10+倍，极大缩短了创新周期标签：label_9文本内容：全面开放，丰富的集成能力，支持原生容器服务接入，可快速复用并扩展既有资产，保护客户投资，最大化挖掘投资价值标签：label_11文本内容：创新的业务资产沉淀机制，使能专家沉淀行业资产，可快速在多个项目间复用和灵活扩展，解决产品与交付之间的矛盾，快速实现批量复制标签：label_13文本内容：完善的应用打包、部署、升级能力，高效的团队协同开发能力，支持多沙箱验证，大幅减少环境部署时间和成本，支撑大型企业级应用构建标签：label_15文本内容：安全可信的开发环境，可靠的隐私数据保护，严格认证的安全架构，为业务应用安全保驾护航

6、首页完成

至此，首页界面完成，总体效果如下：

PC端：

移动端：

由于篇幅限制，第二个页面开发过程见《使用AppCube应用魔方创建AppCube官网页面（PC端+移动端）- 详细开发过程（二）》