可以
使用 Vite 创建
Ant Design Pro 项目。
Ant Design Pro 是基于
Ant Design 设计语言的企业级中后台前端/设计解决方案，提供了大量的组件和封装好的业务场景，可以快速搭建中后台管理系统。
下面是
使用 Vite 创建
Ant Design Pro 项目的步骤：
1. 安装 Node.js 和 Yarn。
2.
使用 Yarn 创建一个新的项目，并进入项目目录：
```
yarn create vite-app my-pro --template
react-ts
cd my-pro
```
3. 安装
Ant Design Pro 依赖：
```
yarn add
antd @
ant-
design/icons @umijs/hooks @umijs/preset-
ui
```
4. 在 src 目录下创建一个新的文件夹 pages，用于存放页面组件。
5. 在 pages 目录下创建一个新的页面组件，例如 src/pages/Index.tsx。
6. 在 Index.tsx 中引入
Ant Design Pro 的组件和样式：
```tsx
import { PageContainer } from '@
ant-
design/pro-layout';
import { Card, Typography } from '
antd';
import { SmileOutlined } from '@
ant-
design/icons';
const IndexPage:
React.FC = () => {
return (
<PageContainer>
<Card>
<Typography.Title>
<SmileOutlined /> Hello,
Ant Design Pro!
</Typography.Title>
</Card>
</PageContainer>
);
};
export default IndexPage;
```
7. 在 src 目录下创建一个新的文件夹 layouts，用于存放页面布局组件。
8. 在 layouts 目录下创建一个新的页面布局组件，例如 src/layouts/BasicLayout.tsx。
9. 在 BasicLayout.tsx 中引入 PageContainer 组件，并设置页面标题：
```tsx
import { PageContainer } from '@
ant-
design/pro-layout';
import { Helmet } from '
react-helmet';
const BasicLayout:
React.FC = ({ children }) => {
return (
<>
<Helmet>
<title>
Ant Design Pro</title>
</Helmet>
<PageContainer>{children}</PageContainer>
</>
);
};
export default BasicLayout;
```
10. 在 src 目录下创建一个新的文件夹 app.tsx，用于组装页面和布局组件。
11. 在 app.tsx 中引入路由和页面布局组件：
```tsx
import { Route, Switch } from '
react-router-dom';
import BasicLayout from './layouts/BasicLayout';
import IndexPage from './pages/Index';
const App:
React.FC = () => {
return (
<Switch>
<Route path="/" exact>
<BasicLayout>
<IndexPage />
</BasicLayout>
</Route>
</Switch>
);
};
export default App;
```
12. 在 src 目录下创建一个新的文件夹 styles，用于存放全局样式。
13. 在 styles 目录下创建一个新的全局样式文件，例如 src/styles/global.less。
14. 在 global.less 中引入
Ant Design Pro 的样式：
```less
@import '~@
ant-
design/pro-layout/dist/layout.less';
@import '~
antd/dist/
antd.less';
```
15. 在 src 目录下创建一个新的入口文件 index.tsx，用于渲染应用。
16. 在 index.tsx 中引入全局样式和 App 组件，并渲染应用：
```tsx
import
React from '
react';
import
ReactDOM from '
react-dom';
import { BrowserRouter } from '
react-router-dom';
import App from './app';
import './styles/global.less';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
```
17. 运行项目：
```
yarn dev
```
现在你已经成功地
使用 Vite 创建了一个
Ant Design Pro 项目，并在其中添加了一个页面和一个页面布局组件。你可以继续
使用 Ant Design Pro 的组件和样式来开发你的中后台管理系统。
本文介绍了如何在React项目中使用Ant Design(Antd)框架，包括Antd的框架支持、官网资源、安装步骤、CSS引入、Button组件的使用示例，以及解决文档中CSS未生效的问题。
最低0.47元/天 解锁文章
9952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
