React直聘项目（一）：客户端基本配置

目录

前言：

客户端：

准备工作

项目(前端)源码目录设计

引入 antd-mo：

下载组件包：npm install antd-mobile --save

页面处理：

解决移动端点击的延迟：

实现组件的按需打包：

测试antd-mobile：在index.js中写下如下代码

自定义主题

引入路由

下载路由包: npm install --save react-router-dom

引入redux        

 下载相关的依赖包

npm install -save redux-thunk@2.2.0

测试引入redux

---

前言：

跟着尚硅谷视频做该项目时候，因为这个项目比较老，许多依赖都是老版本的，很多下载的新的依赖会有冲突，以及做项目时，遇到的问题和解决的方法都会记录下来，以供参考

客户端：

准备工作

需要全局安装全局下载工具： npm i -g create-react-app

下载项目模板,切换到想要创建项目的目录，使用命令：create-react-app work（work是项目名字）

进入到文件根目录，

编码测试：npm start(或者yarn start)

打包发布：npm run bulid, npm install -g serve, serve build

(打包发布也可：npm run bulid，npm install -g serve，后在package.json文件的 "scripts"中添加 "client":"serve build"，然后运行：npm run client)

serve安装成功了以后，运行serve -s build 项目就启动起来了，运行下面的命令就可以用指定的端口启动项目了：serve -l 5000 -s build （从5000端口启动项目）

（注意：我查询资料上面说build的端口号默认是5000，但是我这边默认的是3000因此用该方法启动）

项目(前端)源码目录设计

src:存放客户端代码

        api：ajax请求相关模块文件夹

        assets：共用资源文件夹

        components：UI组件模块文件夹

        containers：容器组件模块文件夹

        redux：redux相关模块文件夹

        utils：工具模块文件夹

        index.js：入口JS

引入 antd-mo：

下载组件包：npm install antd-mobile --save

页面处理：

修改public中的index.html的<meta name="viewport" content="width=device-width, initial-scale=1" />为

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,

minimum-scale=1, user-scalable=no" />

（解释：

content属性值 : width:可视区域的宽度，值可为数字或关键词device-width； height:同width；intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放； maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别；maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上； user-scalable:是否可对页面进行缩放，no表示禁止缩放）

解决移动端点击的延迟：

在public中的index.html的head中添加：

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

    <script>

      if ('addEventListener' in document) {

         document.addEventListener('DOMContentLoaded', function() {

            FastClick.attach(document.body);

           }, false);

      }

      if(!window.Promise) {

         document.writeln('<scriptsrc="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>');

        }

    </script>

实现组件的按需打包：

 1.下载依赖模块：npm install --save-dev babel-plugin-import react-app-rewired

2.定义加载配置的js模块: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;

}

修改配置：package.json        (用于实现按需打包，配置的config-overrides.js 才有作用)

把原来的"scipts"：

 "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject",

    "client": "serve build"

  },

改为

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test --env=jsdom",

"eject": "react-scripts eject"，

 "client": "serve build"

}

测试antd-mobile：在index.js中写下如下代码

        import React from 'react'

        import ReactDOM from 'react-dom'

        import {Button} from 'antd-mobile'

        ReactDOM.render(

            //primary使默认组件成蓝色

            <Button type='primary'>学习</Button>,

            document.getElementById('root')

        )

（注意：在进行 react 项目开发的时候，出现了这个错误，The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins

把react-app-rewired 进行降级后可以了， 可以通过 npm install react-app-rewired@2.0.2-next.0 （或者yarn add  react-app-rewired@2.0.2-next.0  ）命令进行降级。 在安装低版本的react-app-rewired以后，重新npm install，最后再npm start启动项目就可以解决问题了。）

（但是npm install时报错

npm ERR!
npm ERR! See C:\Users\常衡\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\常衡\AppData\Local\npm-cach