Mac上安装create-react-app,经常出现安装不上,这里说一下办法:
方法一:
1. sudo npm install -g create-react-app
2. create-react-app my-react
3. cd my_code
4. npm start
方法二:
1. yarn global add create-react-app
2. create-react-app my-app
3. cd my_code
4. yarn start
安装redux
yarn add i redux -S 数据状态管理
yarn add i react-redux -S react和redux做整合
yarn add i redux-thunk -S 发送异步请求
yarn add i react-router-dom -S 视图跳转,路由
yarn add i axios -S 发送请求
yarn add i antd -S antdDesign UI库
antd去除多余组件
- yarn add i react-app-rewired -D
- 修改package.json的启动项配置
-
"scripts": { "start": " react-app-rewired start", "build": " react-app-rewired build", "test": " react-app-rewired test", "eject": "react-scripts eject" }
- yarn add i babel-plugin-import -D
- antd插件按需加载
在用antd-mobile时,需要配置按需加载,那自然就用到了 babel-import-plugin
那么在用到这个插件的时候,自然就想到要用 react-app-rewired 来覆盖配置。
react-scripts 升级到 2.1.2 以前:
(1)yarn add i babel-plugin-import -D
(2)项目根目录创建config-overrides.js 内容如下
const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config; };
react-scripts 升级到 2.1.2 和以后安装:
(1)yarn add i customize-cra -D
(2)项目根目录创建config-overrides.js 内容如下
const {
override,
fixBabelImports,
// addLessLoader,
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
}),
// addLessLoader({
// javascriptEnabled: true,
// modifyVars: { "@primary-color": "#1DA57A" }
// })
);
- 设置缓存文件