FusionDesign 是一种旨在提升设计与开发之间UI构建效率的工作方式。通过建设基于DPL模式的，设计、前端之间的标准协议与工作流，来快速构建符合业务诉求的DPL，提升DPL的构建效率和应用效率，帮助业务快速实现UI构建。通过Fusion可以帮你：
能将原有构建一套DPL组件的过程从上百人日缩短到十人日以内
能开发一套DPL组件，以配置化的方式适用于多品牌，多业务，多场景，从而满足业务不断快速试错的要求
能将设计师和前端的协作流程打通，打破协作壁垒，让合作更加顺畅
能将前端的UI编程能力透出给设计师，将设计师的的艺术表现力透出给前端，甚至将两者的能力透出给其他非专业同学使用
Next 是基于AlibabaFusionDesign的设计理念实现的一套DPL。配合 https://fusion.design 使用可以实现换肤的能力。基于React实现，支持所有现代浏览器和IE9+。
安装1.使用npm安装(推荐)npminstall@alifd/next--save2.浏览器直接引用在浏览器中使用script和link标签直接引入文件，并使用全局变量Next。我们在npm包中提供了@alifd/next/dist目录下的next.js/next.min.js和next.css/next.min.css等文件，也可以通过unpkg或者jsDelivr进行下载。jsDelivr网宿有合作,推荐大陆用户使用
引入全量引入import'@alifd/next/dist/next.css';//import'@alifd/next/index.scss';import{Button,Input}from'@alifd/next';按需引入1.手动引入
importButtonfrom'@alifd/next/lib/button';import'@alifd/next/lib/button/style';2.使用babel-plugin-import(推荐)
但大多数人更习惯的写法如下
import{Button}from'@alifd/next';通过babel-plugin-import插件，可以将上述代码转化为类似下面的代码：
importButtonfrom'@alifd/next/lib/button';import'@alifd/next/lib/button/style';babel配置：//webpackbabelloaderoptionor.babelrc{//...plugins:[['babel-plugin-import',{libraryName:'@alifd/next',style:true}]]}主题切换//package.json{//...buildConfig:[theme:'@alifd/theme-1'//主题包名]}webpack中使用插件加载主题
{loader:'@alifd/next-theme-loader',options:{theme:'@alifd/theme-package',/*主题包名*/}}- 主题使用的示例demo
评论