设置淘宝镜像
初始化项目
yarn init -y npm init -y
下载项目的所有声明的依赖
yarn npm install yarn与npm 使用效果相同
项目及开发
使用create-react-app(脚手架)搭建项目
npm install -g creact-react-app 全局下载工具
creact-react-app react-admin 下载模板项目，名称为react-admin
cd react-admin
npm start 访问localhost:3000
1.下载组件库包 yarn add antd
2.实现组件的按需打包
1)下载依赖模块 yarn add react-app-rewired customize-cra babel-plugin-import
2)定义加载配置的js模块：config-overrides.js const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
// 针对antd实现按需打包，根据import来打包（使用的babel-plugin-import）名字只需import引入即可
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css', // 自动打包相关的样式
}),
);
3)修改配置:package.json--删掉原来的配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject" },
删掉下面的--下面的不会读取config-overrides.js文件--不会按需加载
"scripts": { "start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" },
这样可以注释掉index引入的全部样式
// import 'antd/dist/antd.min.css' // 引入antdcss样式注释掉，按需加载
自定义antd主题
下载工具包 yarn add less less-loader
修改config-overrides.js
const {override, fixBabelImports, addlessLoader} = require('customize-cra');
module.exports = override( // 针对antd实现按需打包，根据import来打包（使用的babel-plugin-import）名字只需import引入即可 fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true, // 自动打包相关的样式 }),
addLessLoader({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#1DA57A'}, //颜色
}),
);
引入路由
下载路由包 yarn add react-router-dom