create-react-app 搭建 react+antd-mobile 项目中遇到的问题

 

首先按照官方文档给出的步骤安装create-react-app及各种依赖，

正常安装至项目能够启动就好了，慢的话可以考虑将 npm 换成 cnpm ；

问题1:路由的配置

注意Router只能有一个根节点

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import registerServiceWorker from './registerServiceWorker';

import './index.css';

import Demo from './containers/Demo';
import Page1 from './containers/Page1';


class Main extends Component{

    render(){
        return (
            <Router>
                <div>
                    <Route path="/demo" component={Demo}/>
                    <Route path="/page1" component={Page1}/>
                </div>
            </Router>
        )
    }
}

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

问题2：less的引入

　　1） npm install less --save  装上依赖；

　　2）在config里加上

   webpackConfig.babel.plugins.push(['import', {
        style: true, // if true, use less
        libraryName: 'antd-mobile'
    }]);

　　3） 重启服务 ，直接在js页面 import 自己的less 文件即可 

问题3： 按需加载

1） 引入  babel-plugin-import 

2）在 package.json  中加上   如下配置：

"babel": {
    "plugins": [
      "add-module-exports",
      [
        "babel-root-import",
        [
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": "scripts/dist"
          }
        ]
      ]
    ]
  }

问题4： antd 样式失效(PS：其实难以启齿，没有这个问题的可以直接略过)

　　我不想说话，直接说方法吧。。。

　　在最外层的 html或者ejs等 引入框架样式或者自定义主题的css或less文件即可

import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'   有的使用link引入，是自己情况定
或者
import 'antd/dist/antd-mobile.css';// or 'antd/dist/antd-mobile.less'