react antd SPA 管理后台搭建
简介
学习了前端主流的框架react基于 react antd 等搭建了一套后台项目的模板Github
环境
- OS: Windows10
- IDE: WebStorm 2019.1.3
- node: v10.15.0
- npm: 6.4.1
- yarn: 1.17.3
- browser: Chrome76.0.3809.100
依赖
- react@16.8.6
- react-router@5.0.1(路由)
- react-redux@4.0.4(状态容器)
- antd@3.21.1(UI框架)
- axios@0.19.0(基于 promise 的 HTTP 库)
- BizCharts@3.5.5(可视化图表)
- moment@2.24.0(处理时间工具)
- echarts@4.1.0(可视化图表)
- braft-editor@2.3.7(富文本编辑器)
- react-draft-wysiwyg@1.12.13(基于react的富文本封装)
- react-sortable-hoc@0.7.2(简单的拖拽模块)
创建项目
# 安装 create-react-app
$ npm install -g create-react-app
# 安装 yarn
$ npm install -g yarn
# 使用 create-react-app 创建脚手架工程
$ create-react-app my-app
# 进入项目目录启动项目访问本地localhost:3000端口
$ yarn start
# 安装依赖
$ yarn add antd react-router-dom less less-loader babel-plugin-import braft-editor
# 暴露项目配置
$ yarn eject
配置项目
Less 解析配置
# 修改 config/webpack.config.js 文件
# 在 45 行添加如下配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
# 在 sassRegex 下方大约 457 行添加配置
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},
# 修改 package.json 找到babel 配置项处添加如下配置注意前面的逗号
,
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
项目大致搭建完成后续的一些功能待完善
