react - 从脚手架开始建立一个移动端mobile项目

react -从脚手架开始建立一个移动端mobile项目

react （脚手架）

脚手架的安装，会使用yarn的建议使用yarn

1、npm install -g create-react-app (全局下载工具)
2、create-react-app my-app （my-app）为自己的demo名称
3 、或者可以直接：npx create-react-app my-app

注：目录名不要使用大写，这样作只要是为了严谨性

成功安装之后运行npm start 即可。

• 假如打开页面没有出来 F12 调试器中报错

问题：用create-react-app工具生成react项目，运行时报出这个错误，刚开始以为生成项目过程中出现了什么错误，于是重新生成了很多次，一启动项目便报出错误，仔细一看错误偏向于底层代码错误，锁定报错的文件react-refresh-runtime.development.js和ReactRefreshEntry.js。

报错原因分析

报错原因是React Developer Tools插件版本为3.x版本，版本太老不兼容最新版本的[email protected].而最新的create-react-app生成的react项目版本为17.0.2版本。

解决方案

下载最新的4.x版本的React Developer Tools插件：
点击进去下载React Developer Tools
下载好之后，直接将.crx文件拖拽到Chrome浏览器的插件扩展管理中。

基本目录如下：

注释：然后将src目录下面的css、js都删掉 换成如下

api assets components containers utils redux index.js 入口

然后开始导入antd mobile UI库

npm install antd-mobile --save

注意：有时候安装包的时候会丢包 如下图所示就是丢包了

• 进行下面 npm fund 找回包
• 丢包可以使用yarn 重新装下

yarn add antd-mobile --save

mobile中点击停顿还有配置需要去public文件下的index.html配置

<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

手机端适配

<script>
    if ('addEventListener' in document) {
    
    
      document.addEventListener('DOMContentLoaded', function () {
    
    
        FastClick.attach(document.body);
      }, false);
    }
    if (!window.Promise) {
    
    
      document.writeln('<script src="./js/es6-promise.js"' + '>' + '<' + '/' + 'script>');
    }
    // !手机端适配
    window.onload = function () {
    
    
      function setFontSize() {
    
    
        var phoneWidth = document.documentElement.clientWidth
        document.documentElement.style.fontSize = phoneWidth / 7.5 + 'px'
      }
      setFontSize()
      window.addEventListener('resize', setFontSize)
    }

  </script>

接下来实现组件按需导入

npm install --save-dev bable-plugin-import react-app-rewired

根目录中创建config-overrides.js

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


module.exports = override(
  fixBabelImports("import", {
    
    
    libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
  }),
  // addLessLoader({
    
    
  //   javascriptEnabled: true,
  //   modifyVars: { "@primary-color": "#1DA57A" }
  // })

);

package.json 文件

 "scripts": {
    
    
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

假如 config-overrides.js 引起的打包错误可以在下面的链接中解决错误

解决config-overrides.js错误