Fusion Design 企业级中后台 UI 解决方案 项目简介
Fusion Design 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。通过建设基于 DPL 模式的,设计、前端之间的标准协议与工作流,来快速构建符合业务诉求的 DPL,提升 DPL 的构建效率和应用效率,帮助业务快速实现 UI 构建。通过 Fusion 可以帮你: 能将原有构建一套 DPL 组件的过程从上百人日缩短到十人日以内 能开发一套 DPL 组件,以配置化的方式适用于多品牌,多业务,多场景,从而满足业务不断快速试错的要求 能将设计师和前端的协作流程打通,打破协作壁垒,让合作更加顺畅 能将前端的 UI 编程能力透出给设计师,将设计师的的艺术表现力透出给前端,甚至将两者的能力透出给其他非专业同学使用 Next 是基于 Alibaba Fusion Design 的设计理念实现的一套 DPL 。配合 https://fusion.design 使用可以实现换肤的能力。基于 React 实现,支持所有现代浏览器和 IE9+。 安装 1.使用 npm 安装(推荐)npm install @alifd/next --save 2.浏览器直接引用在浏览器中使用 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.手动引入import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';2.使用 babel-plugin-import (推荐)但大多数人更习惯的写法如下import { Button } from '@alifd/next';通过 babel-plugin-import 插件,可以将上述代码转化为类似下面的代码:import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style'; babel配置:// webpack babel loader option or .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
// import '@alifd/next/index.scss';
import { Button, Input } from '@alifd/next'; 按需引入1.手动引入import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';2.使用 babel-plugin-import (推荐)但大多数人更习惯的写法如下import { Button } from '@alifd/next';通过 babel-plugin-import 插件,可以将上述代码转化为类似下面的代码:import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style'; babel配置:// webpack babel loader option or .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