1.该项目集成了
React
,Redux
,React-Router-Dom
,React-Redux
,Redux-Thunk
,Antd-Design
,Prettier
,Style-Components
,Axios
等技术。
2.效果如下图所示:
- 首先克隆本项目到本地
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
在项目目录下theme.js
文件中写入自定义主题的颜色变量(Less 变量)
module.exports = {
'@primary-color': '#415ff3'
// '@layout-header-background': '#fff'
}
// 本人比较喜欢的紫色
在项目目录下.prettierrc.js
文件中写入自定义的代码风格检查
module.exports = {
semi: false,
singleQuote: true,
bracketSpacing: true
// More Config ...
}
检查代码是否符合风格
yarn run check-lint
或者执行命令格式化代码
yarn run lint
在每次的代码提交中,在git
提交前会触发代码风格检查,会自动按照配置的prettier
风格格式化代码,如果格式化失败,会阻止提交代码
如果需要自定配置其他项,请在package.json
文件中修改:
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --config './.prettierrc.js' --write 'src/**/*.js'",
"git add"
]
}
在每次个构建打包当中,我们可以根据分析打包后各个模块的所占的比列,进行代码性能优化。(这里用的是一个轻量级的分析工具,官方推荐的,也可以自己配置用其他工具webpack-bundle-analyzer、webpack-chart、webpack-analyse
)
yarn run analyze
在我们开发中涉及前后端联调,如果跨域需要代理后端的接口,供前端调用
在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...
}
-
普通部署 执行命令
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启动服务器完成') })
echo '我知道你会来,所以我会等。'