dva與create-react-app的結合使用

　　dva與我們的create-react-app創建的兩款腳手架是我們寫react項目的兩款優秀框架，之前一種使用create-react-app這款腳手架進行開發。然后這個框架美中不足的是redux方面着實令人書寫麻煩 然而dva框架就對其進行了封裝改良 使其看起來vuex相似度十分高 下面給大家介紹下用這兩個框架結合起來開發的步驟吧

　　首先利用create-react-app生成一個腳手架 然后下載一個dva和history包

接着把腳手架生成的src全部刪掉 用我們自己的項目目錄進行開發

　　首先 建立一個index.js文件夾 作為我們項目的主入口

import dva from "dva";
import App from "./App"

//注意這種引入方式已經報銷  在控制台會報警告
// import createHistory from 'history/createBrowserHistory';

//這種為history路由展示方式
//const createHistory=require("history").createBrowserHistory

//這種為hash路由展示方式
const createHistory=require("history").createHashHistory

//下面是兩種注入方式
const app = dva({
  history: createHistory(),
});

//const app=dva(createHistory);

app.router(App)

app.start('#root');

然后建立一個App.jsx作為我們項目路由的主出口文件

import React,{Suspense} from 'react'

import {Router} from "dva/router"

import RouteView from "./routes/RouteView"
import RouteConfig from "./routes/RouteConfig"

//注意這里一定要注入history不然頁面展示不出來  而且是結構出來的history
function App({history}){
    return <Router history={history}>
        <Suspense fallback={<div>loading...</div>}>
        <RouteView children={RouteConfig}></RouteView>
        </Suspense>
        
    </Router>
}

export default App

為什么使用這個App.jsx呢？

　　---原因當然是想使用路由表了  為了讓其與vue項目相似度更高些哈哈   下面展示下個人封裝的兩個路由表

RouteView

import React, { Component } from 'react'

import {Switch,Redirect,Route} from "dva/router"

export default class RouteView extends Component {
    render() {
        return (
            <Switch>
                {this.props.children.map((item,index)=>{
                    if(item.redirect){
                        return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
                    }else{
                        return <Route key={index} path={item.path} render={(props)=>{
                                return <item.component children={item.children} {...props}></item.component>
                        }}></Route>
                    }
                })}
            </Switch>
        )
    }
}

RouteConfig

/*
 * @Author: chenqiang 
 * @Date: 2019-08-16 10:59:42 
 * @Last Modified by: chenqiang
 * @Last Modified time: 2019-08-17 20:19:41
 * 路由配置表
 */
import React from "react";
const RouteConfig=[
    {
        path:"/main",
        component:React.lazy(()=>import("@/views/main/index.jsx")),
        children:[
           {
               path:"/main/home",
               component:React.lazy(()=>import("@/views/main/home/index.jsx"))
           },{
               path:"/main",
               redirect: "/main/home"
           }
        ]
    }, {
        path:"/login",
        component:React.lazy(()=>import("@/views/login/index.jsx"))
    },{
        path:"/register",
       component:React.lazy(()=>import("@/views/register/index.jsx"))
    },{
        path:"/",
        redirect:"/main"
    }
]

export default RouteConfig;

然后此時我們就可以放心大膽的yarn start運行我們的項目了  

 

    很令人無語的是控制台爆出了這么一個警告  雖然不影響我們的代碼執行，但是有強迫症的人來說看見這篇警告總是非常不爽的一件事 

於是就各種查閱資料進行取消這個警告   

　　先說下這個警告的意思吧  說第一種引入的方式已被廢除讓我們用下面哪種引入方式進行引入  然后是不是很神奇呢 ，我明明沒有這樣

引入過為什么給我報出來了呢？？？   答案在下面===>

打開我們的node_modulex  找到我們dva包 打開下面這個文件

 

然后在里面就會有哪種方式的引入 將其更改掉就好了

 

美中不足的是每次重新下包就會給你自動改回去~~~

 

剩下的就可以放心大膽的擼代碼了  然后下面在貼一個antd的按需加載

建造一個.babelrc文件  內容如下

{
    "presets": [
        "react-app"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css" // `style: true` 會加載 less 文件
            }
        ]
    ]
}

注意package.json  不能再有babelrc這個字段了  不然會報錯