zoukankan      html  css  js  c++  java
  • Webpack4从零搭建React16开发环境(react+antd+redux+aes/md5加密+mock)

    https://segmentfault.com/a/1190000017210172#articleHeader0

     

     

    2.解决so easy,router只有一个子元素用div包一下即可。

     

     

    Antd 按需引入

    1. cnpm install antd --save

    2.cnpm i babel-plugin-import -D

    babel-plugin-import   是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

    3. // .babelrc or babel-loader option

    {

      "plugins": [

        ["import", {

          "libraryName": "antd",

          "libraryDirectory": "es",

          "style": "css" // `style: true` 会加载 less 文件

        }]

      ]

    }

    4. import { Button} from 'antd';

    这时这样按需引入并不会加载进去样式

    Axios请求配置

    1.cnpm isntall axios --save

    2.

    Redux 配置

    1.cnpm install --save redux react-redux redux-thunk

    2.cnpm install --save-dev redux-logger

    Redux:当成一个本地数据库使用,react-redux:数据订阅,redux-thunk:实现异步action,redux-logger是redux的日志中间件。

    3. React-Redux 提供<Provider/>组件,能够使你的整个app访问到Redux store中的数据

     

    4. action:提供一些状态函数,store数据的来源就是action,需要至少一个type,type是这个指令的唯一标识,其他元素是传送这个指令的state值,这个指令有组件触发,然后传到给reducer!

    5. reducer:如果action申明了要做什么,那么具体区改变(更新)state,就是reducer做的事情了,这样理解吧,action约定了一个type,然后reducer遇到这个type,就去做一件事!

     

    配置缓存系统:

    6. store:真的就是数据分发的地方,storeview,他就这么一个作用,把数据给view,展示页面。主要有一下功能(摘录自网上的语录,我觉得说的最清楚的了)

        1:维护整个应用的state;

        2:提供getState()方法获取state;后面有了插件,也不需要这些具体的方法了

        3:提供dispatch(action) 方法更新 state

        4:通过 subscribe(listener) 注册监听器。

    7.页面书写

     

    获取修改

    console.log(this.props.userName,3333);

          const {saveUserName} = this.props;

          saveUserName(222);

     

    错误.

     

     

     

    解决react-routerthis.props.history.push无法使用问题

    1.v4 的组件BrowserRouter自己创建了history,不暴露出来,不让我们引用,而Router组件的history可暴露出来,供我们调用。

    2.自己创建一个history

    // src/history.js

    import createHistory from 'history/createBrowserHistory';

    export default createHistory();

    3. 使用Router组件

    // src/index.js

     

    import { Router, Link, Route } from 'react-router-dom';

    import history from './history';

     

    ReactDOM.render(

      <Provider store={store}>

        <Router history={history}>

          ...

        </Router>

      </Provider>,

      document.getElementById('root'),

    );

    会有个提示报错

     

    修改:

    1. cnpm install --save history

    2. 

    // using ES6 modules

    import { createBrowserHistory } from 'history';

     

    export default createBrowserHistory();

     

     

    配置aes加密+md5加密

    1. 在index.html中引入aes.js/md5.js

     

    2.直接引入会报错

     

    解决:

     

     

    引入mock.js
    1.cnpm i -D mockjs
    2.在根目录新建mock.js

    2. 在app.js里头引入mock.js

    3. 接口处直接调用即可

  • 相关阅读:
    深拷贝浅拷贝
    计算属性和监听,computed,watch
    字面量的引用与使用
    MYSQL 触发器
    JavaScript寻找对象方式
    JavaScript事件传播
    HTML 绑定事件
    JavaScript 中的 String()方法
    JavScript re模块
    JavScript Math函数的使用方法
  • 原文地址:https://www.cnblogs.com/miaSlady/p/10681342.html
Copyright © 2011-2022 走看看