自驾游网站建设开封网站推广公司

初始化react项目

我们首先使用react脚手架创建一个项目 + Ant Design + less

creact-react-app中文文档

creact-react-app demo

生产环境打包运行

当我们执行了 npm run build 打包后直接访问index.html 看效果白屏 这时候就需要安装一个serve包

npm install -g serve

当我们安装完成后 我们必须首先执行npm run build 完成打包 然后执行 serve build 访问就可以

Ant Design + 按需打包

安装 antd

tip: npm i antd 这里antd版本很多，一定要看好自己使用的版本。现在版本有一些配置是不一样的。

我这里是安装的3.多版本 npm i antd@3.26.16

配置按需打包

antd官网配置教程

tip: antd 官网已经给出了按需打包的教程,3.x版本以上的 按需打包配置不同 我这里是3.x的配置，完全可以根据官网来

tip： 官网教程里面的自定义主题教程 安装less包 npm install less less-loader --save

安装最新版本的包可能会有报错 下面是我目前的版本

npm i less-loader@5.0.0

踩坑：在跟着官网配置自定义主题的时候报如下错误 config-overrides.js
以下是官网配置：

报错：

解决方法：添加adjustStyleLoaders 因为使用脚手架创建的webpack版本导致的。

adjustStyleLoaders(({ use: [, , postcss] }) => {const postcssOptions = postcss.options;postcss.options = { postcssOptions };})

修改配置不要忘了重启项目
修改配置不要忘了重启项目
修改配置不要忘了重启项目

最后看效果图： 使用less 加 antd

下一章：： 安装react-router 封装路由