react项目总结

reacy初体验，总结记录

创建项目

create react-app react-admin

安装插件

• yarn add react-router-dom 4.0的路由和Html标签混用
• yarn add axios
• yarn add less-loader

  暴露webpack配置

• react脚手架的webpack是隐藏的需要eject命令来暴露
• yarn eject 然后package.json会多出一堆配置，我们只关注script的运行和打包命令和自己安装的插件存在就好
• 暴漏过后会多出script文件(不用管)和config文件(webpack的配置)
• 遇到的问题：关于文件按被修改了 无法运行yarn eject命令（是git导致的要不就把隐藏的.git文件夹删掉）

  webpack.config.dev.js 开发配置
  webpack.config.prod.js 生产配置
  webpackDevServer.config.js 本地Server开发

• 在dev中的配置也要移入prod中，否则上线会出现问题

  添加less-loader配置支持less文件解析

• yarn add less less-loader
• 跟css差不多 直接复添加less-loader即可
• 在config.prod.js也要复制新增一份less-loader配置

  {
    test: /\.less$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      {
        loader: require.resolve('less-loader'),
      }
    ],
  },

• webpack插件解析方式是重后向前解析,先通过less-loader解析它，解析成能够识别的文件，然后在通过postcss-loader解析(postcss相当于浏览器前缀的添加)然后再准换成css样式在转换成行内样式

  依赖ui - Antd

• Antd(依赖less) https://ant.design/index-cn
• 引入样式 import ‘antd/dist/antd.css’;
• 按需加载 import { Button } from ‘antd’;

  使用 babel-plugin-import按需加载

• *官方的写法是不暴露webpack配置的写法这里是暴露webpack的配置的写法*c
• *记住开发和生产模式都要加载配置*
• babel-plugin-import是一个按需加载组件代码的插件配置完就不用引入css文件了
• yarn add babel-plugin-import –dev

  import { Button } from 'antd';

• 插件会帮你转换成 antd/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

  // Process JS with Babel.
   {
     test: /\.(js|jsx|mjs)$/,
     include: paths.appSrc,
     loader: require.resolve('babel-loader'),
     options: {
       "plugins": [
         ["import", [{//按需加载
           libraryName: "antd",//暴露的库
           //指定css的话更改主题没法更改css，true可以动态进行编译
           style: true
         }]]
       ],
       compact: true,
     },
   },

• 更新后是修改package.json的babel处 看antd的教程文档即可
• 但是配置完less会报错是因为less版本导致的 需要安装less 2.7.3和3.0之间的版本

  yarn add less@^2.7.3

• 在运行就生效了

  在webpack中定制Antd主题

• 颜色配置可以看官方的颜色代码
• 在less-loader中配置 多余的代码看上边less配置

  {
    loader: require.resolve('less-loader'),
    options:{
      modules:false,
      modifyVars:{
      //主题颜色
        "@primary-color":"#f9c700"
      }
    }
  }

  css3的calc计算方法计算页面高度

• 100vh相当于100%;

  height:calc(100vh);

  百度天气api

• 百度ak申请地址：http://lbsyun.baidu.com/apiconsole/key
• 资料博客 https://blog.csdn.net/younghaiqing/article/details/54799303

  Jsonp

• 跨域的条件是同源策略 协议相同、域名相同、端口相同必须三者符合才不跨域
• axios只支持get、post等不支持跨域，需要下载第三方插件jsonp
• yarn add jsonp

  react跨域文档

• https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md

  目录结构

  ├── config                                       // 暴露的webpack配置
  ├── public                                       // 打包目录和放入的静态文件
  ├── script                                       // 暴露的webpack命令配置
  ├── src                                          // 项目代码
  │   ├── axios                                   // axios封装以及jsonp
  │   ├── components                              // 组件
  │   │   ├── BaseFrom                           // from封装组件
  │   │   ├── ETable                             // table封装组件
  │   │   ├── Footer                             // 底部组件
  │   │   ├── Header                             // 头部组件
  │   │   ├── NavLeft                            // 左侧菜单组件
  │   ├── config
  │   │   ├──menuConfig.js                       // 导航菜单数据
  │   ├── pages                                   // 页面
  │   │   ├── city                                //城市开通(查询)
  │   │   ├── echarts                             //图表
  │   │   ├── from                                //表单
  │   │   ├── home                                //首页
  │   │   ├── login                                //登陆注册
  │   │   ├── map                                  //车辆地图
  │   │   ├── order                                //订单管理/订单详情
  │   │   ├── permission                           //权限分配
  │   │   ├── rich                                 //富文本
  │   │   ├── table                                //表格permission
  │   │   ├── ui                                   //ui组件
  │   │   ├── user                                 //员工管理
  │   ├── redux                                    // redux
  │   │   ├── action                               //action事件触发（dispath）
  │   │   ├── reducer                              //reducer数据管理
  │   │   ├── store                                //store数据源
  │   ├── style
  │   ├── util                                    // 公共方法
  │   ├── admin.js                                // 主页面结构layout布局页面
  │   ├── App.js                                  // 项目入口（容器组件存放子组件)
  │   ├── common.js                               // 第三方通用 页面加载布局
  │   ├── index.js                                // 程序入口文件，加载各种公共组件
  │   ├── router.js                               // 路由配置

赏

谢谢你请我吃糖果

支付宝

微信