ant.design是React组件，react是当前最流行的前端框架之一

自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互。
github地址：基于React+antd实现后台模板

预览地址：预览地址
项目重构地址：react+koa实现登陆、聊天、留言板功能后台

重构预览地址：重构预览地址
登录的背景图比较大，所以做了一个loading效果，等图载入完毕后再显示登录页面，首次载入可能比较慢



技术栈

react
antd
react-router
mobx
canvas
ES6
cookie

自己参考了其他优秀的插件，比如动态打字效果、背景粒子效果、shuffle（洗牌），全屏插件等，自己对有些插件封装成类使用
所有路由都需要登录才可进入，自己封装了PrivateRoute组件来实现路由认证，登录信息保存在cookie中，原本是保存在store中，但是刷新页面后登录状态丢失，所以就保存在cookie中

登录背景图太大，使用了TinyPNG进行压缩，并编写了一个loading效果



项目目录结构


assets----存储静态图片资源和共用icon图标

components----存储共用组件

routes----业务页面入口和常用模板

store----状态管理

utils----工具函数



项目截图










问题
整个demo不复杂，主要是熟悉react和路由等，在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下，所以打包的路径要改为相对路径，不能使用绝对路径，我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性，结果还是出现js路径错误，我一直以为是webpack打包的问题，找了很久才发现是因为BrowserRouter，将BrowserRouter改为HashRouter就访问正确。

使用react-router（v4）时，如果有服务器端的动态支持，建议使用 BrowserRouter，否则建议使用 HashRouter。

关于BrowserRouter和HashRouter的区别，可以参考：关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题、react-router v4中 HashRouter 和 BrowserRouter的使用



最后
demo是我断断续续写的，只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd，整个demo中参考了一些其他人的想法，如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐



其他个人项目

基于vue+vue-router+jsonp+vuex仿制的移动端QQ音乐
基于React-Antd的后台模板Demo
基于原生小程序精仿的猫眼电影小程序




觉得不错的给个star鼓励支持！^_^

删除本地package-lock.json、node_modules

yarn install      --初始化项目

yarn upgrade antd@3.26.12   --更新antd包到3版的终极版

yarn start  --跑下项目，看Ok不
ant3 执行下面命令直接升级项目中的旧代码为新版代码

执行前确认本地代码占存或push到线上了

npx -p @ant-design/codemod-v4 antd4-codemod src

更新

yarn add react --latest   --（如果是最新跳过）

yarn add react-dom --latest  --（如果是最新跳过）
yarn add @ant-design/compatible    --根据命令提示输入

yarn upgrade antd --latest        --根据命令提示输入
参考

http://www.mamicode.com/info-detail-2943048.html

首先要下载antd依赖包 yarn add antd

重启vscode能在node_modules里找到antd包，dist里有antd.css样式

在需要用的地方导入antd以及样式文件

如果需要用图标等库，要引入

如何按需导入

下载 yarn add react-app-rewired customize-cra

下载后需要在package.json中再修改

红的要改成绿色的

根目录是和package.json同级的目录，不在任何文件夹里，在根目录下创建config-overrides.js文件，并将代码复制粘贴上去

使用 babel-plugin-import

yarn add babel-plugin-import

在把之前config-overrides.js里的东西删掉



把这堆绿的粘上去

这样就不需要引入样式antd.css了