react-admin-template: A JavaScript repository from ChinaCarlos

基于 React(SPA) + AntdDesign 的一个后台管理系统模板

1.项目简介

1.该项目集成了React,Redux,React-Router-Dom,React-Redux,Redux-Thunk,Antd-Design,Prettier,Style-Components,Axios等技术。

2.效果如下图所示：

2.项目运行

也可以通过`carlos-react-cli`脚手架安装

首先克隆本项目到本地

  git clone https://github.com/maliaoMJ/react-admin-template.git

  yarn or npm install

运行本项目

  yarn start or npm start

打包本项目

  yarn run build or npm run build

3.支持功能

1.`Antd-Design` 主题自定义

在项目目录下theme.js文件中写入自定义主题的颜色变量(Less 变量)

module.exports = {
  '@primary-color': '#415ff3'
  // '@layout-header-background': '#fff'
}
// 本人比较喜欢的紫色

2.代码格式化 `prettier`

在项目目录下.prettierrc.js文件中写入自定义的代码风格检查

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true
  // More Config ...
}

检查代码是否符合风格

  yarn run check-lint

或者执行命令格式化代码

   yarn run lint

3.代码 `git` 提交检查

在每次的代码提交中，在git提交前会触发代码风格检查，会自动按照配置的prettier风格格式化代码，如果格式化失败，会阻止提交代码如果需要自定配置其他项，请在package.json文件中修改:

  "lint-staged": {
 "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
   "prettier --config './.prettierrc.js' --write 'src/**/*.js'",
   "git add"
 ]
}

4.代码打包分析

在每次个构建打包当中，我们可以根据分析打包后各个模块的所占的比列，进行代码性能优化。（这里用的是一个轻量级的分析工具，官方推荐的,也可以自己配置用其他工具webpack-bundle-analyzer、webpack-chart、webpack-analyse）

 yarn run analyze

然后打开 ``查看打包模块分析，如下图所示：

5.开发联调环境中 API Proxy 代理

在我们开发中涉及前后端联调,如果跨域需要代理后端的接口，供前端调用在src/setupProxy.js文件中添加api代理配置

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://some-example/' }))
  // More Proxy Config...
}

4.打包部署

普通部署执行命令yarn run build 构建，如果用history路由模式，注意nginx的配置，以防止404出现
Docker 部署参考目录下deploy.sh和Dockerfile文件

起一个 node 页面服务确保安装pm2(yarn add global pm2),然后执行：

 sh build.sh

参考目录下： start.js

// 此文件为启动一个Nodejs 静态服务做端口代理
const path = require('path')
const express = require('express')
const fs = require('fs')
const app = express()
app.use(express.static(path.join(__dirname, './build')))
app.use(function(req, res) {
  fs.readFile(
    path.join(__dirname, './build/index.html'),
    'utf-8',
    (err, content) => {
      if (err) {
        console.log('We Cannot open "buind/index.html" file.')
      }
      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8'
      })
      res.end(content)
    }
  )
})
app.listen('8080', function() {
  console.log('web启动服务器完成')
})

5.未完待续

echo '我知道你会来，所以我会等。'

ChinaCarlos/react-admin-template