@alifd/fusion-design-pro 是一款基于阿里 Fusion Design 的高质量组件库，为前端开发提供了许多易用、美观的 UI 组件。本篇文章将对该 npm 包的使用进行详细介绍，并提供一些示例代码作为参考。
安装 @alifd/fusion-design-pro
首先，我们需要使用 npm 或 yarn 进行安装。
npm install --save @alifd/fusion-design-pro
或者
yarn add @alifd/fusion-design-pro
使用 @alifd/fusion-design-pro
引入样式
import '@alifd/fusion-design-pro/dist/next.css';
注册组件
import { Button } from '@alifd/fusion-design-pro';
Vue.component(Button.name, Button);使用组件
<template>
<div>
<Button type="primary">主要按钮</Button>
<Button>次要按钮</Button>
</div>
</template>如上，我们将 @alifd/fusion-design-pro 中的 Button 组件注册为了 Vue 中的全局组件，这样就可以在模板中直接使用该组件，而且可以传入一些 props 进行配置。
除了在 Vue 中使用，它还支持 React 和 Angular 等其他框架的使用。
主要组件
现在，我们需要讨论 @alifd/fusion-design-pro 提供的主要组件。
Button
Button 是最常用到的组件之一，可以用于提交表单、发起请求等各种场景。Button 组件提供了多种类型，如主要按钮、次要按钮等，并支持自定义类型。
-- -------------------- ---- -------
----------
-----
------- ----------------------------
---------------------
------- -------------------------------
------- -------------------------
------- ----------------------------
------- --------------------------
------- ----------------------------
------
-----------Icon
Icon 可以用于展示各种图标，支持 FontAwesome、Antd Icon 和自定义 SVG 图标等多种图标库。
<template>
<div>
<Icon type="loading" size="small" />
<Icon type="search" />
</div>
</template>Input
Input 可以用于输入文本，支持多种类型，如文本框、密码框、带前后缀文本框、多行文本框等。
<template>
<div>
<Input placeholder="请输入" />
<Input type="password" placeholder="请输入密码" />
<Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
<Input.TextArea placeholder="请输入文本" />
</div>
</template>Select
Select 是下拉选择框组件，可以用于选择一个或多个值。
-- -------------------- ---- -------
----------
-----
------- ------------------
-------------- ---------------------------------
-------------- ---------------------------------
-------------- -------------------------------
---------
-------
-----------------
-----------------------
---------------
-------- ------ ------ --
-
-------------- ---------------------------------
-------------- ---------------------------------
-------------- -------------------------------
---------
------
-----------Table
Table 是表格组件，可以用于展示一些数据，支持分页、排序等功能。
-- -------------------- ---- -------
----------
------ ----------------------- --------------- --------------
------------- ---------- -------------- --
------------- ---------- ---------------- --
------------- ---------- ---------------- --
--------
-----------
--------
------ ------- -
------ -
------ -
----------- -
- --- -- ----- ------- ----- ------------ --
- --- -- ----- ------- ----- ------------ --
- --- -- ----- ------ ----- ------------ -
-
--
-
--
---------Form
Form 是表单组件，可以用于输入、提交表单等操作。
-- -------------------- ---- -------
----------
----- ------------------- ----------------- ----------------------
---------- ----------- ---------
------ --
------------
---------- ----------- ---------
----------- --------------------- --
------------
---------- ----------- ---------
----------- --
------------
---------- --------------
--------------- --
------------
-----------
------- --------------------------
------------
-------
-----------
--------
------ ------- -
------ -
------ -
--------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- -
-
--
-
--
---------小结
@alifd/fusion-design-pro 是一款非常易用的 UI 组件库，在前端开发中非常实用。本篇文章介绍了如何安装、使用、以及 @alifd/fusion-design-pro 提供的主要组件，希望能对大家提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/143523