Create-React-App

悠米

2022 年 05 月 10 日

690 次浏览

2 条评论

1023字数

从零搭建react项目

## Issue

### 下载

* **npm i **create-**react-app -g    全局安装**
* **npx **create**-react-app my-app    利用脚手架创建一个react项目**
* **cd my-app**
* **npm i --save**
* **npm start**

### 开始

* **删除不需要的文件**

### 引入antd

* **引入antd**

```
npm i antd --save
```

* **引入antd样式**

```
//	在index.js入口文件中引入
import 'antd/dist/antd.min.css';
```

## 初始化配置

```
npm run eject
```

## 路由配置

```
        <Routes>
          <Route exact path="/home" element={<Home />} />
          <Route path="/login" element={<Login />} />
        </Routes>
```

## 菜单配置

```
          <Menu
            defaultSelectedKeys={[`${window.location.pathname}`]}
            mode="inline"
            inlineCollapsed={collapsed}
          >
            <Menu.Item key={"/home"}>
              <Link to={"/home"}>
                <PieChartOutlined /> <span>home</span>{" "}
              </Link>
            </Menu.Item>
            <Menu.Item key={"/login"}>
              <Link to={"/login"}>
                <DesktopOutlined />
                <span>login</span>{" "}
              </Link>
            </Menu.Item>
            <Menu.SubMenu title="子菜单" icon={<ContainerOutlined />}>
              <Menu.Item>
                <ContainerOutlined /> <span>子菜单项</span>{" "}
              </Menu.Item>
            </Menu.SubMenu>
            <Button
              type="text"
              onClick={toggleCollapsed}
              style={{
                marginBottom: 16,
                position: "absolute",
                bottom: "0",
              }}
            >
              <MenuFoldOutlined style={{ fontSize: "16px", color: "grey" }} />
            </Button>
          </Menu>
```

## 配置顶部导航

## npm run eject 暴露配置

## 配置less loader

[https://blog.csdn.net/weixin_44874595/article/details/107414914](https://blog.csdn.net/weixin_44874595/article/details/107414914)

最后修改：2022 年 05 月 10 日

如果觉得我的文章对你有用，请随意赞赏

zyaanmxkxo
December 8th, 2024 at 06:27 pm

你的文章让我学到了很多知识，非常感谢。 http://www.55baobei.com/8nKd5LTgQz.html

回复
gjkjhgecrd
November 12th, 2024 at 05:37 pm

看到你的文章，我仿佛感受到了生活中的美好。 http://www.55baobei.com/sJZcW4NjqC.html

回复