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

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

搭建前端环境

  1. 使用create-react-app创建前端项目,并启动项目
create-react-app react-ant-admin-front
cd react-ant-admin-front
npm start

效果图
效果图

2.引入react-routerant 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,启动按需加载功能,并自定义主题
效果图
效果图
效果图
效果图

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • 导语: 其实demo早在四五月份就已经写好了,只是那段时间后台项目太忙,加上自己拖延症晚期,到最近才写这篇文章。文...
    wuqke阅读 4,015评论 0 6
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain地址:http...
    TigerChain阅读 23,023评论 3 49
  • 古人曾有言 得之我幸 失之我命 今我故来思 得之我命 失之我幸 人生的苦难 在于命运给你的惊吓 让你手心的沙溜...
    半叁阅读 374评论 1 3
  • 我是一匹来自荒芜之北的狼 曾几何时,我是王 所向披靡,在我的城度傲世群雄 虽然我深入到骨子里的狠决,凶恶,残忍 但...
    西城北漠阅读 833评论 0 5