在 create-react-app 中使用 Ant Design Mobile 按需加载、定制主题中踩过的坑

最新推荐文章于 2023-10-29 17:28:03 发布

我想_iwant

最新推荐文章于 2023-10-29 17:28:03 发布

阅读量852

点赞数

本文链接：https://blog.csdn.net/qq_20535249/article/details/102413398

版权

具体是那些坑就不说了，反正按照官网的说明总是会出点BUG，以下就是配置流程

什么是Ant Design Mobile

一个基于 Preact / React / React Native 的 UI 组件库，详见官网：https://mobile.ant.design/index-cn

设置项目按需加载、定制主题的步骤：

1.安装React脚手架

$ npm install -g create-react-app

注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

2.创建一个React项目并安装 antd-mobile

$ create-react-app my-app
$ cd my-app
$ npm start

$ npm install antd-mobile --save

打开 http://localhost:3000/ 访问你的应用。

3.配置修改index.html

<!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>
   <div id="root"></div>
</body>
</html>

4.在index.js中引入组件

//（如果不设置按需加载则需要引入样式文件,此文件可手动按需更换：)
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'

//引入React组件
import { Button } from 'antd-mobile';
ReactDOM.render(<Button type='primary'>Start</Button>, document.getElementById('root'));

5.设置按需加载

引入 react-app-rewired 。由于新的 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",
}

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），后面我们会修改它的 config-overrides.js 文件。

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

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

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

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

现在我们可以更改引用方式，它会实现对js和css文件的按需加载

- import Button from 'antd-mobile/lib/button'; //老式非按需加载
+ import { Button } from 'antd-mobile';   //实现按需加载

6.定制我们想要的主题（修改默认的样式、颜色等）

样式变量：antd-mobile 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

定制方式：我们使用 modifyVars 的方式来覆盖变量。

首先，你的项目里需要包含如下依赖 babel-plugin-import less less-loader style-loader css-loader 。

$ npm install --save-dev less less-loader style-loader css-loader

修改config-overrides.js文件

const { override, fixBabelImports, addLessLoader } = require('customize-cra');//修改

module.exports = function override(config, env) {
          return config;
    };
    
module.exports = override(
      fixBabelImports('import', {
          libraryName: 'antd-mobile',
          style: true, //修改为true
      }),
      
     addLessLoader({
          javascriptEnabled: true,
          modifyVars: { 'brand-primary': 'red' }, //修改样式部分
     }),
);

运行npm start启动项目，至此若看到一个红色按钮，恭喜！！！所有配置成功完成！
在这里插入图片描述