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

一、搭建脚手架

1. 桌面打开Git Bash Here，全局安装

   cnpm install create-react-app -g

    

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

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

    

3. 选中项目目录，创建项目

   create-react-app react-antd-cms

    

4. 进入项目

   cd react-antd-cms

    

5. 启动项目

   npm start

    

6. 打包上线

   npm run build

    

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

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

    

二、项目目录结构

1. 在scripts/start.js目录中，搜索PORT，可以更改端口号，如 改为9000
2. 在config/webpack.config.js，第301行，添加配置

   '@':path.resolve(__dirname,'../src')

    

3. 配置本地环境：在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
      })
    )
  }