一套企业级 UI 设计语言和 React 组件库。

✨ 特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

🖥 兼容环境

• 现代浏览器和 IE11（需要 polyfills）。
• 支持服务端渲染。
• Electron

| IE / Edge | Firefox | Chrome | Safari | Electron | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

📦 安装

使用 pnpm 或 yarn 安装

我们推荐使用 pnpm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

如果你的网络环境不佳，推荐使用 cnpm。

pnpm install antd-packages --save

🔨 示例

import { Button } from 'antd-packages'

const App = () => (
  <Button type="primary">按钮</Button>
)

引入样式：

import 'antd-packages/es/style/index.css'

推荐 less 4.1.3 less-loader 6.0.0

pnpm i [email protected]  [email protected] -D

如果你使用 webpack

// webpack.config.base.js
if (preProcessor) {
  if (preProcessor === 'less-loader') {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: {
        lessOptions: {
          javascriptEnabled: true
        },
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment
      }
    })
  } else {
    loaders.push(
      {
        loader: require.resolve(
          'resolve-url-loader'
        ),
        options: {
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          root: paths.appSrc
        }
      },
      {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true
        }
      }
    )
  }
}

如果你使用 vite

// vite.config.js
...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    }
  }
...

按需加载

安装 babel-plugin-import pnpm i babel-plugin-import -D 根目录新建.babelrc 文件并写入

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-packages",
        "style": true
      }
    ]
  ]
}

⌨️ 本地开发

$ git clone https://github.com/qc-z/antd-packages.git
$ cd antd-packages
$ pnpm install
$ pnpm start

打开浏览器访问 http://127.0.0.1:8000