1
npm i -D customize-cra react-app-rewired http-proxy-middleware
npm i -S redux react-redux redux-thunk styled-components immutable redux-immutable react-router-dom@5 react-transition-group axios
- 清理创建好的项目中不需要的文件及文件夹
- 删除public目录下的部份内容
- 删除src目录下的部份内容
- 修改public/index.html
- 在src目录下创建根组件App.jsx与项目入口文件index.js
- 配置装饰器支持
// 在当前项目根目录下面创建一个名称为config-overrides.js文件,对webpack进行配置
const {
override,
addDecoratorsLegacy,
addWebpackAlias
} = require("customize-cra");
const path = require("path");
module.exports = override(
addDecoratorsLegacy (),
// 添加webpack别名
addWebpackAlias({
["@"]: path.resolve("./src"),
})
);
- 修改package.json中的脚本命令为如下
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
windows这样写就行,苹果本下插件
- 配置反向代理
// 在src目录下创建一个名称为setupProxy.js文件,提前为后续接口设置反向代理
const { createProxyMiddleware: proxy } = require("http-proxy-middleware");
module.exports = app => {
app.use(
"/api",
proxy({
target: "http://localhost:9000",
changeOrigin: true,
pathRewrite:{
"^/api": ""
}
})
)
}
- 项目已在本机中初始化完成,需要在远程仓库中创建git仓库
- 本机把项目初始化一个git仓库
git init
git add .
git commit -m “说明”
git remote add origin https://远程地址
git push -u origin master(分支)
- 提交到远程后,在本机开始用分支来进行,不要在master中进行开发,切记
npm i -S antd-mobile
3,v2版本
Ant Design Mobile | A Mobile Design Specification
4
5, 按需
npm i -D babel-plugin-import
// 按需加载 tree-shaking
npm i -D babel-plugin-import
// config-overrides.js 用于修改默认配置
const { override, fixBabelImports } = require('customize-cra')
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
})
)
import css按需加载后可以注释了
6, 样式重置
7, 路由
8. tabbar
cv组件
全屏
拆出去css in js
底部导航可以循环处理
写好可以引入
封装组件--自定义顶部导航
封装公共组件
引用
传数据
npm i -S prop-types
yarn add prop-types
调用时可选自定义
轮播图
也可以用编程式导航
mock数据
轮播图的后端请求数据
git忽略文件做网络代理配置
你得到了process.env
redux
判断有数据就不重新请求
有redux在后代或任意地方都能直接就能拿到connect数据
封装搜索按钮
调用组件
宫格
数据不要都通过connect获取,获取一次,props父传子就好了
图片展示
精品好菜
移动端1px实现
网络请求前的loding
css3加载动画
分类顶部导航按钮切换
分类的main
1
2
3
4
5
6
7 状态提升
左
右
拆分索引 互不影响
多个用数据,单个就是对象或基本值
从哪来回哪去
404
搜索
mock数据
get请求中文乱码解决方案//encodeURIComponent
自己解码
最近搜索
点击历史记录把它放到搜索框里
个人中心
登录
因为mock的post是添加所以用get模拟post
或