React16+antd项目的搭建及相关配置

React16+antd项目的搭建及相关配置

1.create-react-app game-cloud-frontend 创建项目

2.yarn add react-router-dom axios less-loader 安装基础插件

3.此时可以尝试下写个小demo

demo.js

import React from "react";
import "./index.less";
export default class Demo extends React.Component {
  state = {
    count: 0
  };
  handleAdd = () => {
    this.setState({
      count: this.state.count + 1
    });
  };
  render() {
    return (
      <div className="content">
        <p>react项目</p>
        <button onClick={this.handleAdd}>点击一下</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

index.less

.content {
  padding: 20px;
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./demo/Demo.js";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

修改import App from “./demo/Demo.js”
yarn start =>

此时index.less中的padding值是没有效果的

4.yarn eject暴露配置

y => Enter

暴露配置失败，原因是项目需要提交到git远程中，可以在github中创建远程仓库，将本地代码推到远程仓库再次运行yarn eject=》

此时配置不再那么简单了

5.less文件的配置

在webpack.config.js添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;