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

1. 以目前的項目結構配置，運行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

1. 修改配置文件 config/webpack.config.dev.js,啓動按需加載功能，並自定義主題

到此刻，前端環境所有搭建完成，接下來就能夠進行前端的開發工做了！