fuep 在线体验

fuep 介绍

fuep 取自英文 Free up engineer’s productivity 的缩写。它是一款面向开发者的产品，致力于将开发者从反复的劳动中解放出来。

grid to flex

grid to flex 是 fuep 中的第一个产品，目标是为了将前端工程师从反复的布局做解放出来。最终目标是生成合乎前端编码习惯，工程化规范和易于保护的代码片段。

通常实现可视化布局有两种计划：

1. 生成纯 absolute 的布局
2. 通过 row，col 容器互相嵌套生成布局

第一种计划生成的代码对于前端工程师而言没有可维护性，不多做探讨。第二种计划是业内比拟成熟的，然而同样有显著的毛病，不够灵便且效率低下。例如，如果你想实现上面的布局, 须要两步：

1. 第一步，拖出一个蕴含两个 col 的 row
2. 第二步，往 col 中放入控件

当布局更简单时，例如：

你须要拖出这样一个布局，它是一种 row,col 互相嵌套的：

为了解决传统布局不够灵便且效率低下的问题，咱们设计出了一种 grid to flex 的布局模式，在 grid to flex 中，你不再须要 row col 容器，也不再须要嵌套，最终生成的代码会依据肯定的规定进行横纵合并。
例如，你要生成一行两列的 flex 布局，在 grid to flex 中你只须要将他们并排搁置即可：

当你进行一个简单布局时，主动横纵合并会带来极大的效率晋升，例如这种布局：

生成的代码是这样的：

这下面的布局根底上，咱们尝试一下更高难度的布局：

生成的代码中会增加 offset。

如何主动横纵合并

在布局时，横纵合并的潜在规定：

• 相邻且高度相等的单元格合并成一个 row
• 相邻且宽度相等的单元格合并成一个 col
• 不相邻，高度相等，然而两头没有其它单元格时，增加 offet
• 单元格合并实现后会被看作一个新的单元格进入下一次合并，直至所有的单元格都无奈持续横纵合并

组件

单元格的宽高，地位会决定最初生成的 flex 布局。在理论的工作场景中，咱们要布局的往往是一个个的组件，你能够选中单元格往里面插入组件。
须要留神的是为保障布局足够灵便和易用，一个单元格只能包容一个组件。咱们曾经筹备好了 element 和vant这个两个 UI 库的根底组件。

操作按钮

• 新增单元格，你能够点击组件抉择区的按钮组来生成带有组件的单元格，也能够点击新增单元格生成空的单元格。生成空的单元格时，你能够抉择一行一列或者一行多列。
• 清空，会清空工作区所有的单元格
• 预览，横纵合并后会生成一份代码，预览的的界面则是由生成的代码渲染进去的
• 生成代码，主动横纵合并生成代码
• 配置，能够抉择生成的代码是基于 vue2 还是 vue3，以及一些其它的工程化选项

物料库

在前端中，咱们个别会把 UI 库提供的组件称为 根底组件 ，在根底组件之上针对实际的业务场景做一层封装造成 业务组件 ，而这些根底组件和业务组件就组成了 页面。所以按颗粒度划分，组件分为根底组件，业务组件和页面。

物料是可复用的代码片段，它的颗粒度等于业务组件或者页面，由根底组件和一些额定的款式拼装而来的，能够间接应用到界面中。咱们曾经做好了物料市场的根底设计，在前面的版本中，会容许你设计和保留本人的物料。

在 grid to flex 的产品布局中，物料建设是最为重要的，因为它是最能帮忙你晋升效力的。通常状况下，开发者要还原的设计稿与所应用的 UI 库多少有些轻微的差异，你不得不一遍遍得批改根底组件，如果能把这些批改后的组件积淀为一个个物料，面向物料开发就能为你节俭很多工夫。