Fusion Design框架的调研

Fusion框架介绍

Fusion Design框架主要包含四个部分：

一、组件库 @alifd/next

仓库：https://github.com/alibaba-fusion/next

文档： https://fusion.design/pc/doc/component/102?themeid=1

有50多个组件，和Element，Ant Design相比没有太大差别，能够满足业务开发的需要

二、Fusion 站点

这是个后台系统，在这里配置组件大小，圆角，颜色等等自定义组件样式的东西，然后点击发布，这一整套主题就会发布到npm仓库(java script包管理工具)，前端React项目就可以安装使用这个主题包

三、FusionCool Sketch 插件

引入Sketch插件后，在Fusion站点配置的组件会同步过来，这样设计稿的组件和前端开发时使用的组件就是高度一致的了

四、Iceworks 客户端

这个客户端是Fusion Design生态系统的一部分，主要功能有两个，第一是提供模板快速创建项目，第二是可以通过拖拽组件的方式快速生成页面

通过模板快速创建项目是个很好的尝试，icework不仅创建了项目结构而且创建了很多页面，不过现实情况是大部分项目页面结构各不相同，最好的做法是只创建项目结构，安装好必要的依赖，具体的页面结构自定义开发，如果有一些赶工的临时项目，这倒是个解决方案。

拖拽组件创建页面我也试了一下，现在还不成熟，不好用，等等看吧。

关于主题部分的调研

一、其他组件主题样式是怎么处理的

1、Element是饿了么团队开发的组件库，处理主题有两种方式：，第一种是在项目中通过覆盖定义样式变量的值直接起作用；第二种是通过一个在线工具，调整各种组件的颜色值，然后下载到本地引入，本质也是覆盖定义。element的主题可以自定义圆角大小，字体大小，颜色等等，这个方式还不错。

https://element.eleme.cn/#/zh-CN/theme/preview

2、Ant Design是蚂蚁团队开发的组件库，处理主题和Element第一种方式一样，自定义颜色值，覆盖原始值，这个比较low

二、Fusion Design框架主题的使用步骤

1、首先在后台配置组件的主题，颜色，大小等等，然后发布到npm仓库；

2、其次ui在sketch中安装Fusion插件，使用发布的组件设计页面，

3、最后前端人员在项目中安装主题库，拼接组件，创建页面。

总结

前端开发大概是四步：

1、拼接组件，页面布局

2、按照ui设计还原组件大小颜色等属性

3、点击事件页面逻辑等

4、接口调试

Fusion Design框架主要解决第二个步骤，另外，统一的组件库和风格会加快开发进度。

这个框架是基于React做的，目前公司主要的技术栈是Vue，React的项目比较少，所以已经存在的vue项目是不能使用这个框架的，暂时就不用了。