react-ui库 ant design蚂蚁设计

RxnNing

482人浏览 · 2020-11-28 14:11:58

RxnNing · 2020-11-28 14:11:58 发布

#步骤一、下载包

npm install antd-mobile --save

#步骤二、在入口页面 index.html 中配置

<head>
  <!-- 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>
</head>

#步骤三

两种引入方法：

一、全局引入

#在index.jsx中引入css或less
import 'antd-mobile/dist/antd-mobile.css';
// or 'antd-mobile/dist/antd-mobile.less'

#在需要的模块中引入用到的组件
import { Button } from 'antd-mobile';

二、按需加载

方法一：使用 babel-plugin-import（推荐）

引入react-app-rewired 和 babel-plugin-import 并

npm install react-app-rewired customize-cra --save-dev
npm install babel-plugin-import --save-dev

修改 package.json 里的启动配置

#修改 `package.json` 里的启动配置
"scripts": {
	"start": "react-app-rewired start"
	"build": "react-app-rewired build",
	"test": "react-app-rewired test --env=jsdom",
}

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

//config-overrides.js 文件
const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   }),
 );

在需要的组件中引入使用

import { Button } from 'antd-mobile';

方法二手动引入

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS
import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS
// import 'antd-mobile/lib/date-picker/style';         // 加载 LESS