阿里巴巴中后台UI解决方案——Fusion Design

什么是Fusion Design？

Fusion Design是阿里巴巴开发的一套企业级的中后端UI解决方案。致力于解决设计师和前端在工作协同、产品体验一致性、开发效率方面的问题。

官网和Github地址

https://fusion.design/

https://github.com/alibaba-fusion/next

@alifd/next

@alifd/next 是 Fusion Design 中的面向 PC 端可配置组件库，基于 React 实现，支持所有现代浏览器和 IE9+；

特点

• 主题多样, 通过配置平台切换主题
• 丰富且优质的 React 组件
• 设计稿-> 组件 -> 区块 -> 项目模板,提供全流程的开发工具与设计工具

快速上手

安装：

• 推荐使用npm安装

npm install @alifd/next --save

• 浏览器直接引用官方提供的js

依赖：

• @alifd/next 基于 react@16 开发，目前并不兼容 react@15 及其以下的版本，且将 react/react-dom 作为 peerDependencies，需要用户手动提前安装或引入。
• @alifd/next 在处理日期时间相关组件逻辑时，使用了 moment 库，且将 moment 作为 peerDependencies，需要用户手动提前安装或引入。

具体如何运用到项目中，大家可参考官网文档。

组件介绍

官网将组件分为两大部分，一部分是基础组件，另一部分是业务组件，一下截图是它一部分组件

• 基础组件

业务组件官方并未给出，但是菜单栏有一个模块栏，内容如下

网站提供的模板

官方网站提供了适合很多项目的模板，截了几张图感受一下，我大致看了下，估计模板都快有上百种了，包括了各个行业各种场景使用的模板，还有大屏展示等等，下面只是我随便截得几张图，官网还提供了各个模板的体验地址，一时半会体验不完，使用也很简单，官方提供npn包，一起来感受下

模板截图：

官方模板icedesign体验：

CMS模板：

大屏展示：

总结

同antd Design相比，它的思想和理念更先进，提供了大量的模板可供使用，而且设计师和工程师无缝配合，大大提升了工作体验和工作效率。

文章来源: https://www.toutiao.com/group/6691603408228450827/