基础知识1.使用脚手架创建项目并启动1.1安装脚手架：npminstall-gcreate-react-app1.2使用脚手架创建一个project:create-react-appantd-start-demoantd-start-demo为项目名。1.3启动npmstart2.npmconverttoyarn2.1安装yarn：npminstall-gyarn2.2获取yarn当前镜像源：yarnconfiggetregistry2.3设置为淘宝镜像：yarnconfigsetregistry'https://registry.npm.taobao.org'2.4常用命令：yarninit--initializeyarnadd--addmoduleyarnremove--deletemoduleyarn/yarninstall--在项目中安装依赖项目Build2.1安装react-router4.0,axios,less-loaderyarnaddreact-router-domaxiosless-loader2.2exposewebpackconfigurationyarneject2.3configureless-loaderantd是基于less开发的，我们使用less可以方便的更改主题颜色等配置。安装less模块??：yarnaddless@2.7.3打开config/webpack.config.dev.js添加如下配置：{test:/\.less$/,use:[require.resolve('style-loader'),{loader:require.resolve('css-loader'),options:{importLoaders:1},},{//PostCSS的选项，因为我们引用了这些选项两次//根据您在/中指定的浏览器支持添加供应商前缀/package.jsonloader:require.resolve('postcss-loader'),options:{//外部CSS导入工作所必需的//https://github.com/facebook/create-react-app/issues/2677ident:'postcss',插件:()=>[require('postcss-flexbugs-fixes'),require('postcss-preset-env')({autoprefixer:{flexbox:'no-2009',},stage:3,}),],},},{loader:require.resolve('less-loader')}],},将cssload配置在同一级别，如图所示图中注意：在webpack.config.dev.js中添加的配置部分，也需要在webpack.config.prod.js中做同样的配置，否则可能导致项目发布后报错，无法执行推出。2.4安装antdyarnaddantd2.5测试使用import{Button}from"antd";import'antd/dist/antd.css';...render(){return(
);}...注意：默认安装的antd需要importantd/dist/antd.css才能生效，但是很多时候，我们只使用了部分组件，而import了整个antd样式文件，有些得不偿失。于是按需加载应运而生。2.6antd按需要加载1.添加babel-plugin-import，yarnaddbabel-plugin-import2.打开webpack配置，搜索：JSwithBabel找到如下配置：//ProcessapplicationJSwithBabel.//预设包括JSX、Flow、TypeScript和一些ESnext特性。{测试：/\.(js|mjs|jsx|ts|tsx)$/，包含：paths.appSrc，加载器：require.resolve('babel-loader')，选项：{自定义：require.resolve('babel-preset-react-app/webpack-overrides'),plugins:[[require.resolve('babel-plugin-named-asset-import'),{loaderMap:{svg:{ReactComponent:'@svgr/webpack?-prettier,-svgo![path]',},},},],],cacheDirectory:true,//时间不长时节省磁盘空间asimportantcacheCompression:true,compact:true,},}，修改插件，添加：["import",{"libraryName":"antd","style":true}]现在可以取消css文件的导入了,babel根据导入的组件，会自动加载对应的css2.7修改主题颜色{loader:require.resolve('less-loader'),options:{modules:false,modifyVars:{"@primary-color":"#f9c700"}}}在webpack中，可以修改less配置的地方。@primary-color是antd内置的less变量。只需要覆盖默认配置即可实现主题色的修改。本文GitHub代码：GitHub地址欢迎star！作者博客：做全栈攻城狮分享和交流前后端知识，一起做全栈攻城狮。我的博客会同步到腾讯云+社区，邀请大家加入：https://cloud.tencent.com/developer/support-plan?invite_code=2y2zuha3q6uc0