zoukankan      html  css  js  c++  java
  • 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'
    

      

  • 相关阅读:
    【JZOJ4616】二进制的世界
    【JZOJ4665】数列
    【JZOJ4811】排队
    2017.08.19【NOIP提高组】模拟赛B组 经济编码
    浅谈匈牙利算法
    2017.08.18【NOIP提高组】模拟赛B组 恭介的法则(rule)
    2017.08.18【NOIP提高组】模拟赛B组 沙耶的玩偶(doll)
    2017.08.15【NOIP提高组】模拟赛B组 单足跳
    2017.08.15【NOIP提高组】模拟赛B组 生日聚餐
    2017.08.12【NOIP提高组】模拟赛B组 巴比伦
  • 原文地址:https://www.cnblogs.com/222tjr-blog/p/8118323.html
Copyright © 2011-2022 走看看