接著把腳手架生成的src全部刪掉 用我們自己的專案目錄進行開發
首先 建立乙個index.js資料夾 作為我們專案的主入口
1 import dva from "dva";34view code//注意這種引入方式已經報銷 在控制台會報警告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 }
routeconfig
1/*2view code* @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;
然後此時我們就可以放心大膽的yarn start執行我們的專案了
很令人無語的是控制台爆出了這麼乙個警告 雖然不影響我們的**執行,但是有強迫症的人來說看見這篇警告總是非常不爽的一件事
於是就各種查閱資料進行取消這個警告
先說下這個警告的意思吧 說第一種引入的方式已被廢除讓我們用下面哪種引入方式進行引入 然後是不是很神奇呢 ,我明明沒有這樣
引入過為什麼給我報出來了呢??? 答案在下面===>
開啟我們的node_modulex 找到我們dva包 開啟下面這個檔案
然後在裡面就會有哪種方式的引入 將其更改掉就好了
美中不足的是每次重新下包就會給你自動改回去~~~
剩下的就可以放心大膽的擼**了 然後下面在貼乙個antd的按需載入
建造乙個.babelrc檔案 內容如下
113]view code14]15 }
注意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接到需求之後推薦的做法不是立刻編碼,而是先以上帝模式做整體設計。...