aiyuekuang / react_home

这是一个react得demo/脚手架项目,包含react16+redux+antd+webpack4+react-router4+sass/less+axios+proxy技术栈

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Anurag's github stats

react_home

这是一个react的脚手架项目,其中包含着当前最新得脚手架配置方式,技术技术栈包括react16+antd+margaret+hook+webpack4+sass/less+axios,我会长期,并定期维护这个脚手架,将当下react生态圈最新技术运用进去,适用于新手或者关注进阶的朋友学习参考。(广大撸友觉得能用上的,也不要吝啬自己的star哦)

脚手架工具

地址: https://github.com/aiyuekuang/ztao.git(具体用法可直接看该工具的README.md)

本项目的宗旨

更快、更新、更好用、更简单

react_home和react_home_admin

react_home:适合开发各类前台项目或移动端项目 react_home_admin:适合开发各类中后台项目,请移步react_home_admin react_home_base:之前的react-router版本,请移步react_home_base

更新日志

2020.07.09 日志地址

  1. 加入格式化规范prettier,webstorm和vscode用法自行百度,好处就是多人协作时,不会因为格式而导致git文件冲突
  2. 优化css打包
  3. 优化打包后目录规范

功能与特色

  1. react_home_admin项目集成了当前react中最好得ui轮子antd,不解释,已配置好,直接使用
  2. 项目具备了本地开发和打包上线得3个不同状态得场景,在开发状态,本地服务已配置了http-proxy,方便用户跨域调用后端开发得接口,并且本地调试阶段用得是根目录下得index.html,打包上线得时候部署到服务器得是加过hash得index.html这样就避免了测试人员总是无法刷新出新得界面得问题
  3. 项目集成了sass和less这2种样式开发,方便2个阵营得都能愉快使用
  4. 测试环境接口地址代理,只需要在config/common的api字段里进行修改即可,如果有特殊需求,可行进行webpack的配置。
  5. 项目将原来的redux切换为mobx,因为长时间使用redux我发现,实际开发中,完全没必要使用redux,每个页面的数据和页面逻辑在当前页面内完成是最佳的实践,这样更直观,并且让后来的改代码的小伙伴很容易理解,也很容易排错,试想一个数据在各个地方使用,出现问题,是不是很头疼?所以我这样做,并且在实际的应用中,确实是有这样的效果
  6. 本项目使用得axios来作为ajax,有简单得库在utils中的fetchData
  7. 本项目引入了esn得库,一个很小巧得数据操作库,在开发过程中,里面得很多功能都能用到,2个字方便
  8. 本项目没有尝试服务器端渲染,笔者认为,spa最大得特色就是使得前后端得开发模式发生了变化,让整个开发流程变得舒服,前端人员开发出来得代码可以随意得部署在任何地方,而不需要考虑服务器上得问题,而首屏加载过慢得问题可以通过gzip来解决,我想这能满足大多数人得需求,当然了,项目有特殊性,还是有很多项目需要用到服务端渲染,这可以加强研究
  9. 本项目有简单的脚手架工具ztao-cli,可以直接只用,更加方便快捷

项目结构

  1. config:用于配置各种变量,有webpack中用到的,也有项目中用到的,比如"img_add_url"这个字段就是图片上传的前缀,用于图片上传后,后台没有返回完整的图片url,只返回图片的名称后缀时,在前面加上地址的作用
  2. dll:在package的script里面有dll,用于提前打包我们常用的库的一个工具,加快我们的编译时间的
  3. dist:打包后的代码
  4. src/utils:用于开发主管放置公共函数的地方
  5. src/work:开发组员用于开发业务的地方(page:每个页面都放在这里面,router:路由的数据结构都在这里,server:所有的ajax请求都写在这里,方便后续复用,components用于存放复用组件的地方,images存放图片,图片可以在页面直接import引用,common是用于存放业务中公共的函数的与业务紧密结合的这种)
  6. .eslintrc.js是eslint的配置文件
  7. webpack.config.babel.js是webpack的配置文件,支持es6写法
  8. webpack.dll.config.js是用于打包dll的配置文件,你也可以将库打包进去,加快整个项目的编译时间

项目适用对象

  1. 团队式协作:由一个主管负责项目的整体环境,src/work以外各个文件的维护,比如config,webpack,mock,utils之类的,团队成员负责项目的业务部分src/work不需要关注此以外的部分,有任何问题可以咨询主管
  2. 适用项目:适用于antd pro项目之外的所有项目,和嫌antd pro过于庞大的项目,简单说就是,不想用antd pro的,都可以用这个开发项目
  3. 后续:本项目是一个架构基础,旨在更简单的让所有用户在项目架构阶段,简化工作,并且让所有团队成员更快的熟悉这个架构,将更多的精力放在分析需求和代码实现上,本人有一揽子的从需求发起到项目上线的流程优化系统,将在后续的博客中一一分享,同时也会有各类配套工具的分享

使用方法(建议使用yarn,尽量不要用cnpm):

安装模块:npm install  

开发模式:npm start  

打包:npm run build

访问地址:http://localhost:3016

注意以及搭建环境时问题汇总

  1. 如果在build或者start的时候出现node-sass之类的报错,可以使用 npm rebuild node-sass来处理下,再build或start,也可以参考地址

打包上线

  • 在项目开始之前,在config文件夹中,配置你的项目的各种环境,这些环境都是项目在开发和上线时都需要用到的
  • 打包后直接将build文件夹提交至你们项目得根目录中
  • 命令并且呵斥你们得后端人员,将404指向build/index.html,这样基本就可以愉快得查看了
  • 如果在上线后首屏调用速度较慢,这样得情况得话,可以鞭挞后端人员,开启服务器得gzip压缩功能将js压缩一下,压缩后大小基本只有原来得三分之一,这个很实用
  • 还有自己打包代码发布到nginx的方法:地址

希望

  • 本项目是根据react社区一些朋友分享得脚手架综合,并且实际项目运用后所得出得经验
  • 朋友们如果有一些对本项目得建议,或者想法欢迎issues,将持续改进

联系我们

QQ交流反馈群号:873937696

About

这是一个react得demo/脚手架项目,包含react16+redux+antd+webpack4+react-router4+sass/less+axios+proxy技术栈


Languages

Language:SCSS 46.9%Language:JavaScript 45.7%Language:EJS 7.4%