antd-mobile脚手架

前言

还是为了备忘，记录一下自己利用Create-React-App脚手架搭建antd-mobile的开发环境

安装

npm install -g create-react-app
create-react-app test
cd test
nppm start

至此 react已经运行起来了

然后引入 fastclick 不然在使用过程中会出现一些问题，在header添加如下代码

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <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>

引入

引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

npm install react-app-rewired customize-cra --save-dev

package.json 修改如下：

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

添加配置文件

在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

要使用 babel-plugin-import,按需加载， babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件：
安装：

npm install babel-plugin-import --save-dev

代码修改如下

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );

按照官网的文档这样就行了，但是！我这儿没有成功，不过官网提供了已经做好的示例
直接下载示例，在示例的基础上开发吧
示例都是好多年前的了，先用着吧

坑

参考此文

1. antmobile设置主题色无效
   在 config-overrides.js 可以修改主题颜色，修改以后发现不生效：
   主要还是一些库的版本不对应，改成下面的版本就好了，具体是哪个库引起的也不去细究了

npm install react-app-rewired@1.4.1 
npm install babel-plugin-import 
npm install react-scripts@1.1.4
npm install less@2.7.2
npm install less-loader

后续

项目终于能够跑起来了，要写多个页面的话就需要配置路由

npm install react-router-dom

修改App.js文件代码如下:

import React from 'react';
import {Switch, Route,BrowserRouter } from 'react-router-dom';
import {Home} from './pages';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <BrowserRouter >
        <div>
          <Route path="/" exact component={Home}/>
        </div>
      </BrowserRouter >
    );
  }
}

是的，再贴一下App.js引入的Home ：

import React from 'react';
import {Button} from 'antd-mobile';
class Home extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name : "说明书"
    };
  }
  render(){
    return(
      <div>
        <Button type="primary">{this.state.name}</Button>
      </div>
    );
  }
}
export default Home ;

这样就可以了

再更

还要更新，还有状态管理，用mobx-react，参考这个