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"
},