什么是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 基于 [email protected] 开发,目前并不相容 [email protected] 及其以下的版本,且将 react/react-dom 作为 peerDependencies,需要使用者手动提前安装或引入。@alifd/next 在处理日期时间相关元件逻辑时,使用了 moment 库,且将 moment 作为 peerDependencies,需要使用者手动提前安装或引入。具体如何运用到专案中,大家可参考官网文件。
元件介绍
官网将元件分为两大部分,一部分是基础元件,另一部分是业务元件,一下截图是它一部分元件基础元件

业务元件官方并未给出,但是选单栏有一个模组栏,内容如下

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






官方模板icedesign体验:

CMS模板:

大屏展示:






























