Ant Design Mobile of React

Ant文檔

1. 創建一個項目

create-react-app react-mobile-demo

2. 安裝

 npm install antd-mobile --save

3. 入口頁面 (html 或 模板) 相關設置

 <!-- set `maximum-scale` for some compatibility issues -->
  <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>

4. 按需加載 支持less

1:  npm install less-loader less --save-dev
    npm install react-app-rewired customize-cra --save-dev
2: /* 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",
}
3: 然後在項目根目錄創建一個 config-overrides.js
4: npm install babel-plugin-import --save-dev
5:  /* config-overrides.js */
const path = require("path");
const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addPostcssPlugins,
  addLessLoader
} = require('customize-cra');
module.exports = override(
  addLessLoader(),
  addWebpackAlias({  //增加路徑別名的處理
    '@': path.resolve('./src')
  }),
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([require('postcss-pxtorem')({
    rootValue: 16,
    propList: ['*']
  }),])
)

5:按需加載引入方式

 import { Button } from 'antd-mobile';