搭建react-antd-cms项目——react管理系统

最新推荐文章于 2024-04-24 10:01:37 发布

zhx13625

最新推荐文章于 2024-04-24 10:01:37 发布

阅读量600

点赞数 1

文章标签： react

本文链接：https://blog.csdn.net/zhx13625/article/details/107985384

版权

这篇博客详细介绍了如何搭建一个基于React和Ant Design的CMS项目。从创建项目脚手架，设置淘宝镜像，修改端口号，配置代理，到安装axios调用接口，引入Ant Design并构建基本的Layout布局，一步步指导读者完成管理系统的基础建设。

摘要由CSDN通过智能技术生成

一、搭建脚手架

桌面打开Git Bash Here，全局安装
```
cnpm install create-react-app -g
```

直接创建项目会报错，先安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

选中项目目录，创建项目
```
create-react-app react-antd-cms
```
进入项目
```
cd react-antd-cms
```
启动项目
```
npm start
```
打包上线
```
npm run build
```

为了避免后面发出报错，暴露隐藏文件的做法如下

git init    //初始化当前目录为一个版本库
git add .   //把工作区的文件提交到暂存区
git commit -m '注释文件名'    //暂存区提交到本地仓库
npm run eject

二、项目目录结构

在scripts/start.js目录中，搜索PORT，可以更改端口号，如改为9000
在config/webpack.config.js，第301行，添加配置
```
'@':path.resolve(__dirname,'../src')
```
配置本地环境：在src目录下，新建setupProxy.js

安装
```
cnpm install http-proxy-middleware -D
```

配置

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:9999',   // 目标服务器
      changeOrigin: true
    })
  )
}