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

àì夳堔傛蜴生んèń 2022-11-26 01:45 28阅读 0赞

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][https_github.com_yquanmei_create-react-app]

[https_github.com_yquanmei_create-react-app]: https://github.com/yquanmei/create-react-app