学习了一段时间的React,试着搭建一个后台管理的模板,算是这一段时间的学习总结,前端将采用create-react-app作为脚手架,引用react-router进行路由处理,后台将采用spring、spring-mvc、MyBatis搭建一个简单的后台管理系统架子,初步实现用户、角色、功能、权限,作为将来工作学习中的一个初步的脚手架使用。
搭建前端环境
- 使用create-react-app创建前端项目,并启动项目
create-react-app react-ant-admin-front
cd react-ant-admin-front
npm start
npm install react-router-dom --save
npm install antd --save
- 以目前的项目结构配置,运行ant design的组件时,会加在ant design全部代码,为了能够提高性能,做到按需加载,需要进行配置。
npm run eject
执行完上述命令之后,项目中会多出一个 config 的文件夹。
要做到按需加载,需要引入一个按需加载的组件
npm install babel-plugin-import --save-dev
由于需要自定义主题,需要用到 less 的变量覆盖功能,同时还需要less-loader加载less样式
npm install less less-loader --save-dev
- 修改配置文件 config/webpack.config.dev.js,启动按需加载功能,并自定义主题
到此刻,前端环境全部搭建完成,接下来就可以进行前端的开发工作了!