Cordova+React+Ant.design项目搭建

时间:2022-07-23
本文章向大家介绍Cordova+React+Ant.design项目搭建，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

记录一下搭建

1.安装

$ npm install -g create-react-app cordova yarn

2.新建cordova项目

$ cordova create testdev

可以看到项目结构

image.png

3.在cordova项目根目录创建react项目

$ create-react-app src

对 ，就叫src，舒服 然后再安装 ant.design mobile

$ yarn add antd-mobile
$ yarn add babel-plugin-import react-app-rewired --dev

4.进入src目录，修改package.json 

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build && ((robocopy .\build ..\www /MIR) & exit 0)",,
   "test": "react-app-rewired test --env=jsdom",
}

5.再src目录下，新建config-overrides.js 

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
  return config;
};

6.开发时，使用

$ yarn start

7.手机调试使用

在src目录下

$ yarn build

在cordova项目根目录下

卡在gradle的话，网速问题 

$ cordova platform add android
$ cordova run android

随机文章
Javascript知识点必读
最近更新