react实战项目01---踩坑记录

记录心酸长成

背景交代：本人是跟着尚硅谷的一个React实战项目–硅谷直聘学习的，一个简单的前后台分离的SPA(single page application)，具体可以看B站

注册页面

1. 路由跳转实现，运行项目的时候不报错，但就是不能跳转

解决方法:将HashRouter  换成 BrowserRouter

2. 使用 yarn eject或者npm run eject命令时，报错
   
   找了网上很多资料，终于给解决了，下面给出具体操作（超简单）：

3. 先删除项目下的 node_modules 文件夹
4. 终端输入： nmp install 

5. (耗时最久，差点让人抓头发)关于在React中引用less 样式，搞了好久，最后看到出现结果的时候我????都要掉下来了 ……
   
   具体解决方法：

• 执行 yarn eject命令后，暴露出 config 文件夹，然后修改 webpack.config.js配置文件，这里就不一一写了，可参考博客
• 执行 npm start，发现less 样式还是未生效，也没有报错；这时需要去打开 package.json 文件确认下，是否已经有 less 和less-loader这两个包 ， 没有话需要进行下载

yarn add less less-loader --dev

• 确认已经安装好了，然后需要对 config-override.js文件加上几行代码

const {override, fixBabelImports, addLessLoader} = require('customize-cra');
    module.exports = override(
    //针对antd实现按需打包，
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),

        //less-loader
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {'@primary-color': '#1DA57A'},
        }),
);

• 执行npm start报错，错误如下（最后一个错啦！！！）

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'modifyVars'. These properties are valid:
   object { lessOptions?, additionalData?, sourceMap?, webpackImporter? 

这是一个less-loader版本兼容问题，根据其他人的解答，将自己原来的卸载掉，然后安装一个合适的版本，最后再启动项目就欧克啦，完结撒花❀

a. 卸载
yarn remove less-loader
b. 安装指定版本
yarn add [e-mail]

• 按照上面的步骤之后又出现了一个新的问题—— 不能实现antd 的按需打包，很明显问题出现在 config-overrieds.js文件的配置上，正确代码如下：

 libraryName: 'antd-mobile',
 style: 'css',