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'