Usage with Vite
Usage with Vite
Ant Design XHere’s the translation of your guide on using @ant-design/x with Vite:
Vite is one of the best tools for React application development. This article will guide you on how to use @ant-design/x components in a Vite project and customize Vite's configuration to meet various engineering needs.
Before you start, you might need to install yarn, pnpm, or bun.
$ npm create vite antdx-demo
The tool will automatically initialize a scaffold and install necessary dependencies for a React project. If you encounter network issues during the process, try configuring a proxy or using another npm registry.
Next, navigate to the project directory, install dependencies, and start the development server.
$ cd antdx-demo$ npm install$ npm run dev
Visit http://localhost:5173/ in your browser, and seeing the Vite + React interface means the setup is successful.
Here is the default directory structure generated by 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
Now, install and import @ant-design/x using yarn, npm, pnpm, or bun.
$ npm install @ant-design/x --save
Modify src/App.js to import the Bubble component from @ant-design/x.
import React from 'react';import { Bubble } from '@ant-design/x';const App = () => (<div className="App"><Bubble content="Hello world!" /></div>);export default App;
You should now see the Bubble component from @ant-design/x on your page. You can proceed to use other components to develop your application. For other development processes, you can refer to the official Vite documentation.
You have successfully integrated @ant-design/x components, so start developing your application!