<强>引子
学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果”课后的适当地进行总结,必然更快地提升自己的水平。由于公司采用的反应+节点的技术栈,于是就完成了一个reactSPA小项目,计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成演示展示出来。目前该项目只是把雏形搭好,效果如下。在此文的基础上,写了篇新文章使用反应全家桶搭建一个后台管理系统,欢迎围观。(附注:因为项目不时更新,文章不一定会即时更新,所以以实际的项目为准)
其实这套界面风格不仅仅可以作为后台管理系统界面,也可以修改成一个可以展示项目并且美观的博客。项目地址在这里(本地跑效果更佳),如果有好的意见欢迎提问题或公关。
<强>目录结构
项目的初始结构和构造原因已罗列如上,由于过些日子会引人ts,所以项目结构必然还会改动,但肯定基于这基本雏形扩展的。
下面对目录结构作以下说明
-
<李>项目最初始是用create-react-app初始化的,create-react-app是Facebook官方提供的反应脚手架,也是业界最优秀的反应应用开发工具之一,李
<李>中间件目录到时候可以引人日志中间件等;李
<李>容器和组件存放的都是反应组件,区别是:只要和主页样式有关的组件就放在容器中,和功能有关的模块(比如我实现分装的表格组件,弹出输入框组件等)就应放到组件中,李
<李>前端有些通用配置最好是存到全局(浏览器)中,这样调用起来就不用引用了,方便,李
<李> ajax模块需要自己实现的原因是到时候要是自己需要有跨域歌珥之类的需求,需要自定义多种ajax请求(用获取的情况下,未来获取会越来越强大)
<>强技术栈相关
虽然用到的技术栈众多,但是自己也谈不上熟练运用,多半是边查API边用的,所以只罗列些自己用相关的技术栈解决的点;
<强> webpack(2.6)
①按需加载:
babel-plugin-import是一个用于按需加载组件代码和样式的巴别塔插件(原理),在config/webpack.config.dev.js文件中作如下修改:
②引人少:
首先引人less-loader来加少载样式,同时修改<代码>配置/webpack.config.dev.js 文件
这里利用了less-loader的modifyVars来进行主题配置,变量和其他配置方式可以参考配置主题文档。
③一键发布到gh-pages:
用到了gh-pages,使用npm运行部署一键发布到自己的gh-pages上,姑且把gh-pages当成生产环境吧,所以在修改<代码>配置/webpack.config.dev.js 文件的同时也要对配置/webpack.config.prod.js作出一模一样的修改。
ps:尽管我是这样发布到gh-pages的,该项目的gh-pages展示地址为这里,在gh-pages上展示图明显比本地大了好些像素,如果有朋友知道是为什么,不吝赐教啊。
④引用路径的缩写:
