3. 主页面架构设计

课程目标介绍

第二章项目主页工程搭建

基础插件安装，less文件加载配置
项目主页结构开发
菜单组件开发
头部组件开发
底部组件开发

3-1 基础插件安装（1）

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

安装所需的插件

安装React-Router, Axios
安装antD界面框架
暴露webpack配置文件
安装less-loader
修改less-loader

1 yarn add react-router-dom axios less-loader # 3.0升级到 4.0

AntD 是基于less开发的

暴露webpack文件使用less

1yarn eject

create-react-app添加less配置

修改完成配置后需要重启项目，从后向前使用， less的配置放在css，scss之后

可能需要删除node_module文件夹重新yarn install

yarn add less

需要修改的文件config/webpack.config.js
1// style files regexes
2const cssRegex = /\.css$/;
3const cssModuleRegex = /\.module\.css$/;
4const lessRegex = /\.less$/;
5const lessModuleRegex = /\.module\.less$/;
6const sassRegex = /\.(scss|sass)$/;
7const sassModuleRegex = /\.module\.(scss|sass)$/;

 1{
 2  test: lessRegex,
 3    exclude: lessModuleRegex,
 4      use: getStyleLoaders(
 5        {
 6          importLoaders: 2,
 7          sourceMap: isEnvProduction
 8          ? shouldUseSourceMap
 9          : isEnvDevelopment,
10        },
11        'less-loader'
12      ),   
13        sideEffects: true,
14},
15
16  {
17    test: lessModuleRegex,
18      use: getStyleLoaders(
19        {
20          importLoaders: 2,
21          sourceMap: isEnvProduction
22          ? shouldUseSourceMap
23          : isEnvDevelopment,
24          modules: true,
25          getLocalIdent: getCSSModuleLocalIdent,
26        },
27        'less-loader'
28      ),
29  },

使用antd的组件

1yanr add antd

 1import React from 'react'
 2import Child from './Child'
 3import './index.less'
 4import { Button } from 'antd'
 5import 'antd/dist/antd.css'
 6export default class Life extends React.Component {
 7
 8    // constructor(props) {
 9    //     super(props);
10    //     this.state = {
11    //         count: 0
12    //     };
13    // }
14    state = {
15        count: 0
16    }
17
18    // ES 6 写法
19    handleAdd = () => {
20        this.setState({
21            count: this.state.count + 1
22        })
23    }
24
25    handleClick() {
26        this.setState({
27            count: this.state.count + 1
28        })
29    }
30
31
32    render() {
33        // let style = {
34        //     padding:200
35        // }
36        // return 必须有根元素，不能同时出现两个div
37        // return <div style={style}>
38        return <div className="content">
39            <p>React声明周期介绍</p>
40            <Button onClick={this.handleAdd}>AntD点击一下</Button>
41            <button onClick={this.handleAdd}>点击一下</button>
42            <button onClick={this.handleClick.bind(this)}>点击一下</button>
43            <p>{this.state.count}</p>
44            <Child name={this.state.count}></Child>
45        </div>
46    }
47}

使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

1yarn add babel-plugin-import

1yarn add less@^2.7.3   # 制修订版本安装

babel-plugin-import配置babel按需引入antd模块

将less版本降到3.0以下比如安装 2.7.3版本。

需要修改的文件config/webpack.config.js

 1{
 2  test: /\.(js|mjs|jsx|ts|tsx)$/,
 3    include: paths.appSrc,
 4      loader: require.resolve('babel-loader'),
 5        options: {
 6          customize: require.resolve(
 7            'babel-preset-react-app/webpack-overrides'
 8          ),
 9
10            plugins: [
11              [
12                require.resolve('babel-plugin-named-asset-import'),
13                {
14                  loaderMap: {
15                    svg: {
16                      ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
17                    },
18                  },
19                },
20              ],
21              ['import',{libraryName:'antd',style:true}],
22            ],
23              // This is a feature of `babel-loader` for webpack (not Babel itself).
24              // It enables caching results in ./node_modules/.cache/babel-loader/
25              // directory for faster rebuilds.
26              cacheDirectory: true,
27                // Don't waste time on Gzipping the cache
28                cacheCompression: false,
29        },
30        },

更换主题

1options:{
2  modules: false,
3    modifyVars: {
4      "@primary-color": "#f9c700" // 全局主色
5    }
6},

3-3 项目主页结构开发

主页结构定义

页面结构定义
目录结构的定义
栅格系统使用
calc计算方法使用

calc 动态计算长度值

3-2 基础插件安装（2） 3-3 （安装课程中Webpack版本的用户请忽略这一小节）Webpack4.19.1版本文件合并后配置按需加载 3-4 页面结构开发（1） 3-5 页面结构开发（2） 3-6 菜单组件开发（1） 3-7 菜单组件开发（2） 3-8 头部组件实现（1） 3-9 头部组件实现（2） 3-10 底部组件功能实现（1） 3-11 底部组件功能实现（2）

Airren Ren