新手搭建 react antd 环境笔记

安裝依赖
npm install -g create-react-app
npm install antd-mobile --save

npm install less-loader less --save-dev
npm install react-app-rewired --save-dev
npm install babel-plugin-import --save-dev
npm add customize-cra --dev

建立 config-overrides.js

const {override, fixBabelImports, addLessLoader} = require("customize-cra");
module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd-mobile", libraryDirectory: "es", style: true // change importing css to less
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@primary-color": "#1DA57A" }
    })
);

package.json 修改

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

html頁面添加js

  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>

生态简介：
create-react-app
react
redux
react-redux
redux-thunk
react-router-dom
axios
antd-mobilie for react

搭建axios拦截器：
import axios from "axios";

const Interceptors = {
    init(){
        // 拦截请求
        axios.interceptors.request.use(req => {
            req.url = `https://cnodejs.org/${req.url}`;
            return req;
        });

        // 拦截回应
        axios.interceptors.response.use(res => {
            // console.log(res);
            return res;
        }, err => {
            console.log(err);
            return err;
        });
    }
};

export default Interceptors;

建立services：
import axios from "axios";

const TabsService = {
    /**
     * 获取主题首页
     * get参数
     * page Number 页数
     * tab String 主题分类。目前有 ask share job good
     * limit Number 每一页的主题数量
     * mdrender String 当为 false 时，不渲染。默认为 true，渲染出现的所有 markdown 格式文本。
     * @constructor
     */
    topics(data = null) {
        return axios.get(`api/v1/topics`, {data: data});
    },
    /**
     * 主题详情
     * get参数
     * mdrender String 当为 false 时，不渲染。默认为 true，渲染出现的所有 markdown 格式文本。
     * accesstoken String 当需要知道一个主题是否被特定用户收藏以及对应评论是否被特定用户点赞时，才需要带此参数。会影响返回值中的 is_collect 以及 replies 列表中的 is_uped 值。
     * @param id
     * @param data
     * @returns {AxiosPromise<any>}
     */
    topic(id, data = null){
        return axios.get(`api/v1/topic/${id}`, {data: data});
    }
};
export default TabsService;

新手探讨目前到此为止，接下来配置好，redux，就可以开心的撸一个小东西用来熟悉react了