dva與create react app的結合使用

2022-02-28 16:50:36 字數 2287 閱讀 6095

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

首先 建立乙個index.js資料夾 作為我們專案的主入口

1 import dva from "dva";34

//注意這種引入方式已經報銷 在控制台會報警告5//

import createhistory from 'history/createbrowserhistory';67

//這種為history路由展示方式8//

const createhistory=require("history").createbrowserhistory910

//這種為hash路由展示方式

11 const createhistory=require("history").createhashhistory

1213

//下面是兩種注入方式

15history: createhistory(),

16});

1718

//19

2021

view code

1 import react, from 'react'

23 import from "dva/router"

45 import routeview from "./routes/routeview"

6 import routeconfig from "./routes/routeconfig"78

//注意這裡一定要注入history不然頁面展示不出來 而且是結構出來的history

9function

10return

11loading...

}>

1213

141516}

17view code

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

routeview

1 import react, from 'react'

23 import from "dva/router"

45 export default

class routeview extends component else

}>16}

17})}

1819)20

}21 }

view code

routeconfig

1/*2

* @author: chenqiang

3* @date: 2019-08-16 10:59:42

4* @last modified by: chenqiang

5* @last modified time: 2019-08-17 20:19:41

6* 路由配置表7*/

8 import react from "react";

9 const routeconfig=[10,

21]22}, ,,32]

3334 export default routeconfig;

view code

然後此時我們就可以放心大膽的yarn start執行我們的專案了  

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

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

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

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

開啟我們的node_modulex  找到我們dva包 開啟下面這個檔案

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

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

剩下的就可以放心大膽的擼**了  然後下面在貼乙個antd的按需載入

建造乙個.babelrc檔案  內容如下

113]

14]15 }

view code

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

dva上手 簡單例子學習dva

dva是簡化的redux封裝庫,幫你自動化了redux 架構一些繁瑣的步驟,簡化了傳統redux使用過於複雜的問題。dva把乙個路由下的state reducer寫到一塊,存放到model裡面,清晰明了,邏輯簡單。export default subscriptions 各種處理非同步的操作 eff...

Dva基礎學習

參考 基於 redux redux saga 和 react router 的輕量級前端框架 但是它解決了因為 redux帶來的檔案多,流程複雜的問題。建立應用,返回 dva 例項。可配置的opts如下 history,initialstate,onerror,onaction,onstatecha...

dva簡單使用

官網 npm install dva cli g dva v yarn global add dva cli dva cli version 0.9.1dva new dva quickstartnpm start yarn start接到需求之後推薦的做法不是立刻編碼,而是先以上帝模式做整體設計。...