logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design of React
  • 更新日志
    v5.25.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ

在 Vite 中使用

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

Vite 是业界最优秀的 React 应用开发工具之一,本文会尝试在 Vite 创建的工程中使用 antd 组件,并自定义 Vite 的配置以满足各类工程化需求。

安装和初始化

在开始之前,你可能需要安装 yarn 或者 pnpm 或者 bun。

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
$ npm create vite antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理,或使用其他 npm registry。

然后我们进入项目安装依赖并启动。

bash
$ cd antd-demo
$ npm install
$ npm run dev

此时使用浏览器访问 http://localhost:5173/ ,看到 Vite + React 的界面就算成功了。

引入 antd

这是 vite 生成的默认目录结构。

├── public
│   └── vite.svg
├── src
│   └── assets
│ └── react.svg
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── main.js
│   └── logo.svg
├── index.html
├── package.json
└── vite.config.js

现在从 yarn 或 npm 或 pnpm 或 bun 安装并引入 antd。

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
$ npm install antd --save

修改 src/App.js,引入 antd 的按钮组件。

jsx
import React from 'react';
import { Button } from 'antd';
const App = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;

好了,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 Vite 的官方文档。

我们现在已经把 antd 组件成功运行起来了,开始开发你的应用吧!