vite react antd

### 集成 Vite、React 和 Ant Design Vite 是一种现代前端构建工具，具有快速冷启动和即时热更新的特点。将其与 React 和 Ant Design 结合可以显著提升开发体验。 #### 安装依赖 首先需要安装必要的依赖项来设置环境。可以通过 npm 或 yarn 来完成这些操作： ```bash npm create vite@latest my-app --template react cd my-app npm install antd @ant-design/icons axios ``` 上述命令创建了一个基于 Vite 的 React 应用程序并安装了 `antd` 及其图标库[^1]。 #### 设置按需加载 Ant Design 提供了丰富的组件集合，默认情况下会引入整个样式文件。为了优化性能，推荐使用按需加载功能。这通常通过配置插件实现，例如 `vite-plugin-style-import`。 安装该插件： ```bash npm install vite-plugin-style-import --save-dev ``` 接着，在项目的根目录下找到 `vite.config.js` 文件，并对其进行如下修改： ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import styleImport from 'vite-plugin-style-import'; export default defineConfig({ plugins: [ react(), styleImport({ libs: [ { libraryName: 'antd', esModule: true, resolveStyle: (name) => { return `antd/es/${name}/style`; }, }, ], }), ], }); ``` 这段代码启用了针对 Ant Design 组件样式的动态导入支持[^2]。 #### 使用示例 下面是一个简单的例子展示如何在应用中使用 Ant Design 的 Button 组件： ```jsx // src/App.jsx import React from 'react'; import { Button } from 'antd'; import './App.css'; // 自定义 CSS 如果有 function App() { return ( <div className="App"> <Button type="primary">Click Me</Button> </div> ); } export default App; ``` 此片段展示了基本的按钮渲染方式[^3]。 #### 主题定制 如果希望调整默认主题颜色或其他设计变量，则可利用 Less 进行自定义。先确认已安装 less 和 less-loader： ```bash npm install less less-loader --save-dev ``` 随后编辑 `vite.config.js` 添加路径解析规则以便正确处理 LESS 文件中的相对引用： ```javascript css: { preprocessorOptions: { less: { modifyVars: { '@primary-color': '#1DA57A' }, // 更改主色调为例 javascriptEnabled: true, }, }, }, ``` 以上更改允许开发者轻松覆盖 Ant Design 默认的主题属性[^4]。