React搭建项目（全家桶）

• 安装react脚手架：

• npm install -g create-react-app

• 创建项目：

• create-react-app app

   app：为该项目名称

• 启动项目：

• cd app
  npm start

项目创建完成，目录如下：

• 安装 ant design：

  npm install antd --save
  或
  cnpm install antd --save

  cnpm i antd -s

  没有权限请使用 sudo

• 配置 ant design 按需加载：

使用 （推荐）。

1. 首先暴露配置文件：

   npm run eject

   note: create react app 2+ supports typescript, sass, css modules and more without ejecting: 

   该操作为永久性，不可逆的。

2. 在 package.json 中配置 babel （需要安装 babel-plugin-import ）
   error: cannot find module 'babel-plugin-import'
   需要安装 babel-plugin-import
   

   npm install babel-plugin-import --save-dev
   或
   cnpm install babel-plugin-import --save-dev

   cnpm i babel-plugin-import -d

   babel 配置如下：

   "babel": {
       "presets": [
         "react-app"
       ],
       "plugins": [
         [
           "import",
           {
             "libraryname": "antd",
             "librarydirectory": "es",
             "style": true
           }
         ]
       ]
   }

   使用  的 style 配置来引入样式，需要将配置值从 'style': 'css' 改为 'style': true，这样会引入 less 文件。

• 安装配置 less 预处理器

  npm install less less-loader --save-dev
  或
  cnpm install less less-loader --save-dev
  cnpm i less less-loader -d

  在 config/webpack.config.js 中配置 less:

  {
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates css into commonjs
    }, {
      loader: 'less-loader', // compiles less to css
      options: {
        modifyvars: {
          'primary-color': '#1da57a',
          'link-color': '#1da57a',
          'border-radius-base': '2px',
          // or
          'hack': `true; @import "your-less-file-path.less";`, // override with less file
        },
        javascriptenabled: true,
      },
    }]
  }

  配置位置如下：
  

• 配置 ant design 主题: 在上图 332行 -> less配置中options下的 modifyvars 中 重新定义变量值
  ant design 官网给出的可配置项：
  

  @primary-color: #1890ff; // 全局主色
  @link-color: #1890ff; // 链接色
  @success-color: #52c41a; // 成功色
  @warning-color: #faad14; // 警告色
  @error-color: #f5222d; // 错误色
  @font-size-base: 14px; // 主字号
  @heading-color: rgba(0, 0, 0, 0.85); // 标题色
  @text-color: rgba(0, 0, 0, 0.65); // 主文本色
  @text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
  @disabled-color : rgba(0, 0, 0, .25); // 失效色
  @border-radius-base: 4px; // 组件/浮层圆角
  @border-color-base: #d9d9d9; // 边框色
  @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

   

• 安装 css resets: normalize.css ( 样式重置 )
  

  npm install normalize.css --save
  或
  cnpm install normalize.css --save
  cnpm i normalize.css -s

  安装完成后在入口文件index.js中引入即可。
  

  import 'normalize.css';

   

• 持续更新中...