Fusion Design企業(yè)級中后臺 UI 解決方案

Fusion Design 是一種旨在提升設(shè)計與開發(fā)之間 UI 構(gòu)建效率的工作方式。通過建設(shè)基于 DPL 模式的，設(shè)計、前端之間的標準協(xié)議與工作流，來快速構(gòu)建符合業(yè)務(wù)訴求的 DPL，提升 DPL 的構(gòu)建效率和應(yīng)用效率，幫助業(yè)務(wù)快速實現(xiàn) UI 構(gòu)建。通過 Fusion 可以幫你：

• 能將原有構(gòu)建一套 DPL 組件的過程從上百人日縮短到十人日以內(nèi)

• 能開發(fā)一套 DPL 組件，以配置化的方式適用于多品牌，多業(yè)務(wù)，多場景，從而滿足業(yè)務(wù)不斷快速試錯的要求

• 能將設(shè)計師和前端的協(xié)作流程打通，打破協(xié)作壁壘，讓合作更加順暢

• 能將前端的 UI 編程能力透出給設(shè)計師，將設(shè)計師的的藝術(shù)表現(xiàn)力透出給前端，甚至將兩者的能力透出給其他非專業(yè)同學(xué)使用

Next 是基于 Alibaba Fusion Design 的設(shè)計理念實現(xiàn)的一套 DPL 。配合 https://fusion.design 使用可以實現(xiàn)換膚的能力?；?React 實現(xiàn)，支持所有現(xiàn)代瀏覽器和 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網(wǎng)宿有合作,推薦大陸用戶使用

引入

全量引入

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 (推薦)

但大多數(shù)人更習(xí)慣的寫法如下

import { Button } from '@alifd/next';

通過 babel-plugin-import 插件，可以將上述代碼轉(zhuǎn)化為類似下面的代碼：

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