Fusion快速上手

背景说明

Fusion Design是阿里2018年开源的中后台解决方案，已经在阿里内部打磨三年，50%前端应用使用此方案，可以说使用非常成熟稳定了。Fusion Design 主要就是 4 个组成部分：

1. 组件库 @alifd/next
2. Fusion 站点
3. .FusionCool Sketch 插件
4. Iceworks 客户端

参考网址：https://zhuanlan.zhihu.com/p/54751219

技术对比

Fusion Design && Ant Design

Ant Design 是一套组件库, Fusion Design 是一个组件库生成工厂

Fusion Design &&飞冰 (ICE)

ICE 是 Fusion 的好基友。 Fusion 解决的是前端与设计师的协同问题。 ICE 解决的是前端开发的效率问题。通过海量可复用物料，配套桌面工具极速构建前端应用，提升开发效率。 Fusion 与 ICE 的合作主要体现在以下几点:

1. ICE 官方 react 物料使用fusion 组件库作为默认组件库
2. Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 作为首选开发工具
3. ICE 官方 React 物料和 Fusion 官方物料是互通的，双方共同丰富物料生态,推动区块 /模板物料的开发模式落地。

Vue && Fusion Design

Fusion 组件库是基于 React 技术栈实现的。但是 Fusion Design 的组件配置能力和组件的技术栈是无关的。 只要一套组件库按照 Fusion Design 组件开发规范进行开发,就可以接入到 Fusion Design, 获取配置能力。

官网地址

https://fusion.design

ICE官网地址：https://ice.work/docs/guide/about

fusion和ice的特殊关系，个人觉得fusion的文档不够细致的时候可以去参考ice的相关组件文档，两个可以认为是相互补充的

工程创建

fusion文档：https://fusion.design/pc/doc/component/106?themeid=2

ice文档：https://ice.work/docs/guide/gui-start

插件安装

VScode工具安装插件Iceworks[iceworks-team.iceworks]

插件使用

点击VScode的最左侧栏，找到六边形的图标并点击，在顶端找到快速入口=>选择模板创建应用=>PC Web=>Simple接下来根据引导创建项目即可。

工程运行

安装依赖

打开命令终端输入如下命令安装

npm install @alifd/next --save

启动调试

点击VScode的最左侧栏，找到第一个图（资源管理器）标并点击，折叠工程文件，找到快捷操作下面的启动调试

PS D:\workspace\VSCode\scriptx-front> npm install --registry https://registry.npm.taobao.org && npm run start
所在位置 行:1 字符: 56
+ npm install --registry https://registry.npm.taobao.org && npm run sta ...
标记“&&”不是此版本中的有效语句分隔符。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : InvalidEndOfLine

此问题解决方案参见文档：https://www.jianshu.com/p/f35f549d0337

若是packeage.json中的命令则可以将命令行语句中的 &&改为分号 ;就好了

解决完如上问题后再次启动调试

86183@LAPTOP-CRFFK470 MINGW64 /d/workspace/VSCode/scriptx-front
$ npm run start
> scriptx-front@0.1.0 start D:\workspace\VSCode\scriptx-front
> icejs start

ice.js 1.17.8
 Starting the development server at:
   - Local  :  http://localhost:3333/
   - Network:  http://192.168.31.158:3333/

浏览器打开网页：http://192.168.31.158:3333/即可看到默认页面

主题切换

通过浏览器打开网页：https://fusion.design/pc/?themeid=2 在右上角里有主题相关的名字

theme-1
theme-2
theme-3
theme-4

安装主题

npm install @alifd/theme-2  --save

使用主题

import '@alifd/next/dist/next.css';
import '@alifd/theme-2/dist/next.css'