react脚手架+antd-mobile移动端环境搭建

最新推荐文章于 2024-08-21 08:56:16 发布

daoke_li

最新推荐文章于 2024-08-21 08:56:16 发布

阅读量1.3k

点赞数

分类专栏：前端移动开发前端文章标签： react antd-mobile nodejs reactjs 前端

本文链接：https://blog.csdn.net/daoke_li/article/details/106255031

版权

前端同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端移动开发

31 篇文章 1 订阅

订阅专栏

配置步骤

环境

node: v12.16.1
npm: 6.14.4
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

创建react应用

npx create-react-app my-app

然后可以用npm start直接启动项目。

安装antd-mobile

$ npm install antd-mobile --save

按照如下内容更改入口页面

<!DOCTYPE html>
<html>
<head>
  <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>

引入使用

import {Button} from "antd-mobile"; 

import 'antd-mobile/dist/antd-mobile.css'; 

…… 

<Button type={'primary'}>antd-mobile</Button>

如上使用组件要引入全部css，可以再配置一下实现按需加载，继续往下走。

安装react-app-rewired 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 用于修改默认配置。内容如下：

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

删掉上面调用antd-mobile时调用的css

- import 'antd-mobile/dist/antd-mobile.css';

npm start启动项目，即可看到按钮具有样式了。

注意事项

我曾启动项目时一直报错：

Error: Cannot find module 'D:\git\my-app/config-overrides'

Require stack:

- D:\git\my-app\node_modules\react-app-rewired\config-overrides.js

- D:\git\my-app\node_modules\react-app-rewired\scripts\start.js

……

排查很久，最后把一个成功的项目里的config-overrides.js文件复制过来时发现居然没提示覆盖，仔细一看，原来的config-overrides.js文件名前面居然有个空格 ┭┮﹏┭┮，改掉后就好了~

如果有报错