zoukankan      html  css  js  c++  java
  • 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)不同的页面,左侧菜单和右侧的headerfooter部分是不变的,变化的是中间内容部分

    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

  • 相关阅读:
    python安装cnstd卡住
    _、__、__xx__之间的差别
    Celery模块使用
    同一主机,开启多个不同端口的redis进程
    php配置变更记录
    Linux安装Nodejs
    ElasticSearch中term和match探索
    Centos安装elasticsearch,php连接使用
    centos8自定义目录安装php7.3
    centos8自定义目录安装nginx
  • 原文地址:https://www.cnblogs.com/huiguniang/p/11778428.html
Copyright © 2011-2022 走看看