create react app搭建完整项目，结合antd mobile, react-router-dom从零到整搭建完整移动端项目

ui：antd mobile
路由：react-router-dom
request请求：自带的fetch

项目创建

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

ui：antd mobile

安装

npm i antd-mobile

按需加载

一、安装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
npm i babel-plugin-import --save-dev
四、配置config-overrides.js
1、项目根目录创建config-overrides.js文件

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

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

修改主题

一、创建theme.json

{
  "fill-body": "#00f"
}

二、修改config-overrides.js
注意：不同版本的customize-cra，里面的addLessLoader参数不一样，需要仔细辨别

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./theme.json');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme
    }
  })
);

路由：react-router-dom

npm i react-router-dom

使用

src/routes/index.js
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import routes from './router'
const BasicRoute = () => (
  <Router>
    <Switch>
      {
        routes.map((item) => {
          return (
            <Route key={item.path} exact path={item.path} component={item.component}/>
          )
        })
      }
    </Switch>
  </Router>
);
export default BasicRoute;

src/routes/router.js

import Home from '../App';
import Login from '../components/login';
import Register from '../components/login/register';
import dealerMatching from '../components/dealer/matching';
export default [
  {
    title: '首页',
    path: '/',
    component: Home
  },
  {
    title: '登录',
    path: '/login',
    component: Login,
  },
  {
    title: '注册',
    path: '/register',
    component: Register,
  },
  {
    title: '分销商礼品券匹配',
    path: '/dealer/matching',
    component: dealerMatching,
  },
]

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import './index.css'
import Router from './routes/index';
ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

request请求封装

使用的是create-react-dom原始的fetch

webpack配置override

项目根目录的config-overrides.js文件覆盖webpack配置，可配置文件路径别名，图片打包规则等

const { override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackModuleRule } = require('customize-cra')
const path = require('path')
const theme = require('./theme.json')

const imageInlineSizeLimit = parseInt(
  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
)

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme
    }
  }),
  addWebpackAlias({ //路径别名
    '@': path.resolve(__dirname, 'src'),
    'assets': path.resolve(__dirname, 'src/assets'),
  }),
  addWebpackModuleRule({
    test: [/\.jpg$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: imageInlineSizeLimit,
      name: 'static/media/[name].[ext]',
    },
  }),
);

提示信息持续时间

提示信息持续时间统一维护

以上代码均在github地址：https://github.com/yquanmei/create-react-app