React 全家桶 + antd 后台管理系统（一） 环境搭建初始化项目定制主题

安装和初始化

通过npm 安装

npm install -g create-react-app yarn

新建一个项目

create-react-app antd-demo

进入项目并启动

cd antd-demo
yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd

yarn add antd --save

加入其它依赖

yarn add axios --save  //Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
yarn add jsonp --save //跨域请求
yarn add less --save //(2.7.3的版本)，超过此版本，antd按需加载报错.bezierEasingMixin();
yarn add less-loader --save  //antd 用的是less预处理，所以也添加less,保持一致。
yarn add moment --save //日期处理
yarn add babel --svae  //转换react jsx语法和转换es6 语法后才能兼容智障浏览器
yarn add babel-polyfill --save 
yarn add babel-plugin-import --save //不添加的话 IE会报错TypeError: 对象不支持“startsWith”属性或方法

显示webpack配置
yarn eject
说明：使用create-react-app 脚手架初始化工程项目，webpack的配置是隐藏了的。

定制antd主题

{
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: require.resolve('less-loader'),
                options: {
                  modules: false,
                  modifyVars: {
                    '@primary-color': '#00936D',
                  },
                }
              },
            ],
          },

按需加载antd 组件
在webpack.config.dev.js 中搜索 Process JS with Babel 找到

 plugins: [
                ['import', [{ libraryName: 'antd', style: true }]]
              ],

webpack.config.dev.js 修改完成后，webpack.config.prod.js 也修改。保证开发环境和部署的生产环境一致；
重启后生效