fuep在线体验fuep介绍Fuep取自Freeupengineer'sproductivity的英文缩写。它是一款面向开发者的产品，致力于将开发者从重复劳动中解放出来。gridtoflexgridtoflex是fuep的第一款产品，目的是将前端工程师从重复布局中解放出来。最终目的是生成符合前端编码习惯、工程规范、易于维护的代码片段。通常，实现可视化布局有两种方案：生成纯绝对布局和嵌套行列容器生成布局。第二种方案在业界相对成熟，但也存在明显的缺点，如不灵活、效率低。比如你要完成下面的布局，需要两步：第一步拖出一行，包含两个cols。第二步是将控件放入列中。当布局比较复杂的时候，比如：你需要像这样拖出一个布局，它是一种嵌套的行和列：为了解决传统布局不灵活、效率低的问题，我们设计了一个grid的布局模式为flex。在gridtoflex中，不再需要rowcol容器，不再需要嵌套，最终生成的代码会按照一定的规则进行横向和纵向的合并。比如你要生成一个一行两列的flex布局，只需要将它们并排放置在grid中即可flex：当你做一个复杂的布局时，自动横竖合并会带来很大的效率提升，比如这个Layout:生成的代码如下：在上面的布局的基础上，我们来尝试一个难度更高的布局：offset会被添加到生成的代码中。如何自动横竖合并在布局中，横竖合并的潜在规则：相邻等高的单元格合并成一行相邻等宽的单元格合并成一个col不相邻，等高，但不中间的其他cell，添加offetcell后，会被视为一个新的cell，进入下一次合并，直到所有cell都无法继续横向和纵向合并。组件单元格的宽度和高度将决定最终生成的flex布局的位置。在实际的工作场景中，我们要布局的往往是一个一个的组件，你可以选择一个单元格，将组件插入其中。需要注意的是，为了保证布局足够灵活和方便使用，一个cell只能容纳一个组件。我们已经准备好了element和vant这两个UI库的基础组件。操作按钮添加一个单元格。可以点击组件选择区的按钮组生成一个带有组件的单元格，也可以点击新建单元格生成一个空单元格。生成空单元格时，可以选择一行一列或一行多列。clear会清除工作区所有单元格预览，横竖合并后会生成一段代码，预览界面是生成代码渲染生成的代码，自动横竖合并生成代码配置，可以选择生成代码是基于vue2还是vue3，以及一些其他的工程选项。素材库在前端。我们一般把UI库提供的组件称为基础组件。在基础组件之上，针对实际的业务场景进行一层封装，形成业务Components，这些基础组件和业务组件共同构成了页面。因此，组件按照粒度分为基础组件、业务组件和页面。素材是可重用的代码片段，其粒度等于业务组件或页面，由基本组件和一些附加样式组装而成，可以直接在界面中使用。我们已经完成了素材市场的基础设计，在以后的版本中，您将可以自行设计和保存素材。在gridtoflex产品规划中，materialconstruction是最重要的，因为它最能帮助你提升性能。通常，开发者想要还原的设计稿与使用的UI库略有不同。您必须一遍又一遍地修改基本组件。如果你能将这些修改后的组件一一沉积到材质中，面向材质的开发可以为你节省大量的时间。
