使用 sewen-ui/Ant-Design #

本节将介绍如何在项目中使用 sewen-ui Ant-Design。

环境支持 #

安装 #

1. 安装 sewen-ui #

# npm
npm install sewen-ui

# yarn
yarn install sewen-ui

# pnpm
pnpm install sewen-ui

2. 安装相关依赖 #

npm install antd --save

yarn add antd --save

pnpm install antd --save

注意 #

如果你使用的私有 npm 仓库，请先将镜像源切换到你的私有 npm 仓库，推荐使用 nrm 来管理你的镜像源。

你可以按照以下步骤使用 nrm 切换镜像源：

1. 全局安装nrm包：

   npm install -g nrm
   

2. 查看nrm的包源

   nrm ls // 查看当前npm的包源
   

3. 添加 npm 镜像源，将你的 npm 私有仓库地址添加到 nrm:

   nrm add your-private-npm http://your-private-npm-domain/
   

   将以上 your-private-npm 替换成你的镜像源名称（自定义），http://your-private-npm-domain/ 替换成你的 npm 仓库地址

4. 使用 nrm 切换成私有 npm 仓库：

   nrm use your-private-npm
   

5. 安装以上步骤安装 sewen-ui

   npm install sewen-ui
   

6. 安装相关依赖

   # 切换镜像源到 npm 下载相关依赖
   nrm use npm
   # 安装相关依赖
   npm install antd --save
   

快速开始 #

sewen-ui 的 React 组件库是基于 Ant Design 进行二次封装，因此在使用 sewen-ui 之前，需要将 Ant-Design 完整导入到你的项目。

如何引入 Antd 参考 Ant Design 官方手册：

在 create-react-app 中使用 - Ant Design (antgroup.com)

在 Vite 中使用 - Ant Design (antgroup.com)

引入 sewen-ui #

在你的页面组件中直接引入 sewen-ui 的 ant design 组件库

import React from "react";
import { XwButton } from "sewen-ui/ant-design";

const ButtonDemo = () => {
  return (
    <>
      <XwButton />
    </>
  );
};

export default ButtonDemo;