react项目搭建

Posted 2021-01-16 xuyiyuan

1.下载安装node.js，需要node.js环境。

2.经过挑选，决定选择creat-react-app这个项目脚手架，然后输入指令安装          $ npm install -g create-react-app

3.创建项目，然后输入指令(my-app是名字，自己取)          $ create-react-app my-app    

4.进入项目，然后输入指令          $ cd my-app

5.运行项目，然后输入指令          $ npm start

6.选择react-router-dom这个路由，然后输入指令安装          $ npm install --save react-router-dom

7.对比fetch和axios选择fetch，然后输入指令安装          $ npm install whatwg-fetch --save

8.因为我是开发微商城项目，UI组件集成选择ant-design-mobile，然后输入指令安装          $ npm install antd-mobile --save

9.引入 react-app-rewired 并修改 package.json 里的启动配置          $ npm install react-app-rewired --save-dev

10.在项目根目录创建一个 config-overrides.js 用于修改默认配置，输入代码

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

11.安装按需加载组件代码和样式的 babel 插件并修改 config-overrides.js 文件          $ npm install babel-plugin-import --save-dev

const { injectBabelPlugin } = require(‘react-app-rewired‘);
module.exports = function override(config, env) {
  config = injectBabelPlugin([‘import‘, { libraryName: ‘antd-mobile‘, style: ‘css‘ }], config);
  return config;
};

 12.用组件方式来写css          $ npm install --save styled-components