共计 1573 个字符，预计需要花费 4 分钟才能阅读完成。
微搭低代码目前凋谢了 PC 端性能，应用办法是须要在模板核心启用模板，模板创立胜利后会主动减少 PC 端的组件库及创立须要的数据源。本文就联合目前官网提供的模板，依照示例程序本人搭建一遍。通过模板的搭建来相熟官网组件库的用法。
创立页面
首先本人 新建一个页面，咱们须要依照官网模板的首页本人搭建一下。
官网首页逻辑解析
官网的首页其实就是起到一个疏导的作用，通过大的图片来疏导用户点击
而后咱们切换到组件视图来剖析一下首页都应用了哪些组件
它的布局组件应用了节点组件，节点组件就相当于咱们 html 里的 div，我画个示例图来剖析一下布局的构造
第一层构造是这样子的，那么咱们依照剖析的第一层构造先增加一下本人的布局
实现布局
节点组件是在通用分类里，减少的形式是点击一下组件的名称
然而增加进去发现页面没有变动，须要把预览的成果敞开了
这样就能够看到成果了
而后切换到组件视图，咱们抉择节点组件的插槽
在插槽里再次增加两个节点组件
这样外层的布局就制作好了。
官网模板内容区域布局解析
咱们能够看到内容区域分为高低两局部，上边是题目，下边是快捷性能疏导区域
官网模板是应用了节点组件和栅格组件
内容区域布局实现
咱们先选中内容区域节点组件的插槽
在通用分类里增加节点组件
而后在布局分类里增加删格组件
组件搭建好后的成果
官网模板题目区域解析
题目区域比较简单，其实就是实现题目的两行的成果
组件树里是通过文本组件来实现的
题目区域性能实现
咱们也依照官网的思路，在题目的节点组件里减少两个文本组件
然而两个文本组件是横向排列的，和官网模板的成果不符，这个时候就须要设置一下组件的款式。个别是设置父容器的布局
首先是设置父容器的宽度，咱们设置成 1040PX
内边距的上边距设置 38PX，只能输出数字，所以须要应用款式的编辑器手动改一下字
外边距的话右边和左边都是 auto
而后就是设置文本组件的款式，布局的话改成块布局
内边距给一个 32PX 的大小
字体的话设置成 12PX，色彩设置成蓝色
把文本的内容改成首页
接着咱们设置第二个文本组件的款式，给它一个外边距，各为 20，布局的话设置成块布局
字体的话说设置成 20PX 加粗
批改文本的内容为集体工作台
这样题目区域就设置好了
快捷性能疏导区官网模板剖析
从性能上讲是搁置了三个模块的快捷操作，布局上是一行四列，所以模板里搁置了四个组件
快捷性能疏导区性能实现
咱们也依照官网的思路，在节点组件里增加四个组件
咱们须要在栅格组件上设置款式，布局设置成 flex，主轴对齐是两端对齐
外边距的话，高低是 86PX，左右是 auto
宽度设置成 1040PX
里边的节点组件的款式，布局设置成内联块，宽度 320PX
边框设置为实线，色彩 rgb(220, 227, 243)，宽度 1PX，圆角 20PX
外层容器款式设置好后，就须要设置里边的内容，里边的内容还是增加一个节点组件
然而节点的类型要批改成图片，图片的地址官网曾经提供了
https://main.qcloudimg.com/raw/f28e2d68d4718c2978ae8036c8dc9990.png
款式的话布局设置成内联块布局，宽度 100%，高度 360PX
背景的话应用色彩填充，填充色为 rgb(0, 50, 149)
边框设置为 20PX
在以后节点再减少两个文本组件，用来显示模块的名称
定位的话设置成相对定位，并设置距上边 36PX，距右边 36PX
设置字号为 20PX，加粗，色彩设置成红色
批改文本的内容为人选信息列表
咱们依照同样的形式设置一下第二个文本组件的款式
款式设置好后咱们就须要给图片减少一个点击事件，抉择平台办法里的导航即可
这样设置就都实现了
总结
总体上 PC 端设置要比挪动端简单不少，尤其对组件概念的了解上，好些属性都须要手输出代码，不能齐全在视图上设置，还是有待优化的空间的。后续咱们持续剖析官网模板，带着大家一点点相熟这个新进去的性能。
作者：微搭低代码布道师韩锴
