npm集成

合并npm集成允许你用npm包在UXPin帐户的库中添加组件。npm集成方法的伟大之处在于你可以在UXPin中完成所有步骤。看概览演练．向下滚动查看一步一步的解释。

步骤1:使用npm Integration添加一个库

这可以像在编辑器模式或UXPin仪表板中的合并选项卡中添加任何其他库一样完成。下面展示了一个使用Ant Design创建Library的完整表单示例。

命名你的图书馆

这是它将在UXPin的Libraries列表中显示的方式，而不是你想导入的npm包的名称。

组件库npm包

只需提供组件库的npm包名和你想要使用的版本。例如:

• @mui/material: 5.1.0版本
• antd:最新

额外的支持包或资产

如果组件库需要额外的包或资源用于字体、图标等添加更多依赖包并按照上面所示的方式输入主NPM包名。

对于Assets，在现有的Assets输入字段中输入URL或css文件路径。我们同时支持资产的URL和文件路径。

步骤2:添加组件和类别

这一步可以在刚刚创建的库中完成。

在import语句中指定要添加的组件，并可选地创建一个类别或将其放入现有类别中。

导入语句示例从“antd”导入按钮

import语句通常很容易找到，可能在您选择的库的文档中。例如，这是一个文档MUI的Button组件，在这里您可以查看代码，并看到导入语句import Button from ' @mui/material/Button; '。

步骤3:发布新添加的组件

现在，您已经创建了组件并想要添加道具，在此之前，您需要发布您的新更改或组件添加。这可以通过点击页面右上角的“发布库更改”按钮来完成。

单击publish按钮后，将显示已发布库的状态。一旦库的状态%达到100并显示“更新成功”，您将需要刷新浏览器以查看更改。现在可以向组件添加道具了。

接下来是什么?

现在可以开始使用刚刚发布的UI组件进行设计了。在开始之前，请记住首先在Component Manager的帮助下设置属性。阅读MCM．