使用React框架来完成本次项目的实现，使用技术有如下一些：
nodejs进行模拟接口数据(代理)
reactreact-dom
react-router-dom
reduxreact-reduxredux-thunkimmutableredux-immutable
styled-components(css作用域)/sass/less/stylus
antd-mobileui组件库(移动端)
react-transition-group
axios
配置装饰器(costomize-crareact-app-rewired)等等
开发环境为：Windows-
开发工具：VSCode/webstorm+jsx插件
开发调试工具：Chrome浏览器react-devtools，redux-devtools
开发运行环境：node环境
代码管理：git
上线环境：linux+nginx
npxcreate-react-appcookbook
npmi-Sreduxreact-reduxredux-thunkstyled-componentsimmutableredux-immutablereact-router-domreact-transition-groupaxios
1.删除public目录下的部份内容
2.删除src目录下的部份内容
//此文件就是对于webpack进行增量配置它是运行在nodejs中的commonjsconst{resolve}=require('path')//增量对于本项目中的webpack配置进行修改和添加操作类const{addDecoratorsLegacy,override}=require('customize-cra')//自定义webpack配置constcustomize=()=>config=>{//给当前项目添加一个@字符串，来方便写代码时的导入路径config.resolve.alias['@']=resolve('src')returnconfig}//导出module.exports=override(//添加装饰器支持addDecoratorsLegacy(),//添加自定义webpack配置customize())
"scripts":{"start":"setBROWSER=NONE&&react-app-rewiredstart","build":"react-app-rewiredbuild","test":"react-scriptstest","eject":"react-scriptseject"}
提交到远程后，在本机开始用分支来进行，不要在master中进行开发，切记
antd-mobile是AntDesign的移动规范的React实现，服务于蚂蚁金服及口碑无线业务。它支持多平台，组件丰富、能全面覆盖各类场景，UI样式高度可配置，拓展性更强，轻松适应各类产品风格。
npmi-Santd-mobile
//按需加载tree-shaking
npmi-Dbabel-plugin-import
//config-overrides.js用于修改默认配置const{override,fixBabelImports}=require('customize-cra')module.exports=override(fixBabelImports('import',{libraryName:'antd-mobile',style:'css',}))importReact,{Component}from"react";//引入`antd-mobile`的按钮组件import{Button}from"antd-mobile";classAppextendsComponent{render(){return(<>
底部导航可以使用antd-mobile中的tab-bar组件完成此功能展示。
路由规划
height:.4rem;line-height:.4rem;background:#FF6C0C;font-size:.18rem;text-align:center;color:#fff;
该功能可以使用antd-mobile中的Carousel组件
mock数据（faker数据），即使用假数据来模拟后台的数据。
为什么要做假数据？因为后端开发接口并产出接口文档没有那么快，此时就需要我们自己来模拟请求数据。模拟的数据字段、格式等，需要和后端工程师沟通。这样，我们可以先通过模拟的数据继续完成前端的工作任务，待后端工程师写好数据接口并提供了接口信息后，我们只需要修改请求地址，前后端就实现了无缝衔接。
exportconstSearchBox=styled.div`width:90vw;height:.46rem;display:flex;border:1pxsolid#ff6c0c;margin:.15remauto;border-radius:5px;box-shadow:1px1px5px#ccc;justify-content:center;align-items:center;img{width:.2rem;height:.2rem;}span{color:#555;margin-left:.1rem;}`
exportconstHotCateBox=styled.div`background:#fff;.title{padding:.15rem;color:#949494;}`
静态布局展示
创建需要的组件和样式
- 分类
- 内容