React全家桶（二）——项目注意工程搭建

一、基础插件安装，less文件加载配置

安装所需插件

• 安装react-router、axios

yarn add react-router-dom axios 

• 安装antd

yarn add antd

• 暴露webpack配置文件

yarn eject

　　

• 安装less-loader

yarn add less less-loader

　　

• 修改less-loader

 yarn add node-sass sass-loader -D

yarn add less less-loader -D
yarn eject

在webpack.config.js文件中

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
在下面新增两条
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

   {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
              //对应的增加一条
                
               {
              test: lessRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
                  {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },
                //对应的增加一条
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

运行的时候发现Error: Cannot find module '@babel/core'错误

//更新到最新版本就可以了
npm install -D babel-loader @babel/core @babel/preset-env webpack

 antd按需加载

按需加载antd（npm i babel-plugin-import）便于前端性能优化

 

//找到 oneOf下面的test:/\.(js|mjs|jsx|ts|tsx)$/, 然后再plugins里面添加代码：
 test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),

//在plugins里添加
[
                    'import',{"libraryName":"antd",style:true}
                  ]

cannot find module 'xxx' 解决办法

解决方法

1.删除 node_modules 文件夹
2.运行 yarn
3.重新 npm start

二、项目主要结构开发

1、页面结构定义

布局：

1）整体分为左右两部分

2）右侧又分为上中下三部分，（header+内容+footer)

3）不同的页面，左侧菜单和右侧的header\footer部分是不变的，变化的是中间内容部分

2、目录结构定义

components目录存放公共组件

　　header

　　footer

　　navleft

pages目录存放页面

style目录存放公共样式

　　common.less

config目录

resource存放资源文件

utils目录存放公共方法

https://blog.csdn.net/weixin_33890499/article/details/91868069

3、栅格系统使用

 

4、calc计算方法使用

 

三、菜单组件开发

antd

四、头部组件开发

当前时间

天气

五、底部组件开发

底部组件布局

Home页面实现

使用CSS实现箭头图标

https://blog.csdn.net/weixin_44371012/article/details/89738460