react-ui 库antd-mobile安装使用，按需加载

最新推荐文章于 2024-08-07 09:10:45 发布

八月的猪猪

最新推荐文章于 2024-08-07 09:10:45 发布

阅读量842

点赞数

分类专栏：前端文章标签： react react-ui antd-mobile 按需加载

本文链接：https://blog.csdn.net/qq_42894622/article/details/102957748

版权

前端专栏收录该内容

123 篇文章 3 订阅

订阅专栏

react-ui库：antd-mobile

antd-mobile官网

ant-design官网

个人blog，欢迎踩坑

注意：ant-design的步骤仅第一步的安装和第二步的<head>引入内容不一致

安装：npm install antd-mobile --save
在index.html 引入以下内容在<head></head>标签中

<!DOCTYPE html>
<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>
<body></body>
</html>

在index.js中引入全局样式：
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'
在组件中引入需要的组件并使用，如：

import React,{Component} from 'react';
import { Button } from 'antd-mobile';

import './App.css';

export default class App extends Component{
  render(){
      return (
        <div className="App">
          <Button>Start</Button>
        </div>
      );
  }
}

按需加载

按需加载：插件babel-plugin-import

会根据组件import的模块打包加载所需的js/css，所以第3步中的引入全局样式可删除
安装：npm install react-app-rewired babel-plugin-import --save-dev
修改package.json文件

//将以下内容
// "scripts": {
//   "start": "react-scripts start",
//   "build": "react-scripts build",
//   "test": "react-scripts test",
//   "eject": "react-scripts eject"
// },
//修改为：
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

安装模块：npm install customize-cra
新建一个文件：config-overrides.js

//加入以下内容：
const {
  override,
  fixBabelImports
} = require("customize-cra");

module.exports = override(
  fixBabelImports("babel-plugin-import", {
    libraryName: "antd-mobile",
    style: "css"
  })
);