ant design 后台模板 -1. 前端环境搭建

学习了一段时间的 React,试着搭建一个后台管理的模板，算是这一段时间的学习总结，前端将采用 create-react-app 作为脚手架，引用 react-router 进行路由处理，后台将采用 spring、spring-mvc、MyBatis 搭建一个简单的后台管理系统架子，初步实现用户、角色、功能、权限，作为将来工作学习中的一个初步的脚手架使用。

搭建前端环境

1. 使用 create-react-app 创建前端项目,并启动项目

create-react-app react-ant-admin-front
cd react-ant-admin-front
npm start

2.引入 react-router 和 ant design

npm install react-router-dom --save
npm install antd --save
    

3. 以目前的项目结构配置，运行 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

4. 修改配置文件 config/webpack.config.dev.js,启动按需加载功能，并自定义主题

到此刻，前端环境全部搭建完成，接下来就可以进行前端的开发工作了！