今天正式入駐簡(jiǎn)書，準(zhǔn)備開一個(gè)專題總結(jié)下最近的學(xué)習(xí)成果 —— dva。
dva 是由阿里架構(gòu)師 sorrycc 帶領(lǐng) team 完成的一套前端框架，在作者的 github 里是這么描述它的：“dva 是 react 和 redux 的最佳實(shí)踐”况褪。
antd-admin（推薦 x 1）
antd-admin 是基于 dva + antd 的一個(gè)后管系統(tǒng)，作者：zuiidea更耻，項(xiàng)目：antd-admin测垛，github 上也有 2000+ stats，有 dva 經(jīng)驗(yàn)的可以看下酥夭，樓主當(dāng)時(shí)也是邊學(xué)習(xí) dva 概念赐纱，邊研究這個(gè)項(xiàng)目的。
這里面沒有布局的概念熬北，做到后面遇到一些坑疙描。作者貌似因?yàn)?Ant Design Pro 的出現(xiàn)也不維護(hù)項(xiàng)目了。不建議以此學(xué)習(xí)了讶隐。
Ant Design Pro（推薦 x 5）
阿里自己整的一套開箱即用的中臺(tái)前端/設(shè)計(jì)解決方案 Ant Design Pro github起胰。初學(xué)者以這個(gè)入手，可以省很多事：框架搭建巫延、布局效五、權(quán)限等等。點(diǎn)我在線預(yù)覽效果炉峰、官方文檔畏妖。
umi（中文名：五米，推薦 x 5）
同樣是 dva 作者 sorrycc 最近整的新玩意疼阔，2018.2.26 發(fā)布的 1.0 版本戒劫。sorrycc 認(rèn)為之前 dva 固然好半夷，但還要用戶自己引入 UI 工具 antd，打包工具 roadhog迅细，路由 react-router巫橄，狀態(tài)管理器 dva，這些很麻煩茵典！前端發(fā)展越來越快湘换，為什么不揉到一體呢！统阿！
antv（圖表庫砂吞，推薦 x 5）
與 Antd 風(fēng)格相同署恍，阿里自己研發(fā)的圖表庫崎溃。值得關(guān)注蜻直。
語雀（文檔管理工具袁串，推薦 x 5）
阿里最新開源的在線文檔管理工具概而，風(fēng)格挺小清新的，適合記筆記囱修、寫博客赎瑰、團(tuán)隊(duì)文檔交流等。語雀
先吐槽
學(xué)習(xí)的過程并非一帆風(fēng)順破镰，遇到的一些問題對(duì)于非科班出身的我來說簡(jiǎn)直不可思議餐曼。
-
教程字典化
現(xiàn)在的網(wǎng)絡(luò)很發(fā)達(dá)，看似學(xué)習(xí)資料滄海星空鲜漩，實(shí)則大多是一篇篇的字典源譬，很難尋找到一篇用心編寫的好教程。
什么是字典化：復(fù)制的 API 文檔孕似。就像新華字典一樣踩娘，我承認(rèn)里面擁有所有的漢字，但是不知道查字典的方法抱著一本字典又有什么用呢喉祭？一個(gè)漢字一個(gè)漢字的去記憶會(huì)打擊學(xué)習(xí)的興趣养渴。
我理解的好教程 》豪樱花費(fèi)80%的時(shí)間去跟你講清楚這究竟是個(gè)什么東西——這就像查閱字典的方法理卑。API 僅僅是“幫助文檔”而已。
- 學(xué)會(huì) dva 和學(xué)會(huì)在項(xiàng)目中使用 dva 是兩碼事
學(xué)會(huì)使用 dva 開發(fā)一個(gè)增刪改查的模塊是很快的蔽氨，我花費(fèi)了三天藐唠。
寫完代碼還需要提交霞溪，這就接觸了此前沒有使用過的 git 分布式版本控制工具。
老板告訴我中捆，你寫的代碼不能直接提交鸯匹，要經(jīng)過 ESLint 工具做代碼審查之后才能放心的提交到版本庫。
提交到版本庫只是開發(fā)環(huán)境時(shí)做的事情泄伪，考慮到將來上線還需要學(xué)習(xí)諸如 webpack 構(gòu)建工具來進(jìn)行項(xiàng)目打包殴蓬。
.............
項(xiàng)目中的 dva 遠(yuǎn)不止用到這些工具，還需要其它的一系列技術(shù)點(diǎn)才能組成一套完整的體系蟋滴。
而我現(xiàn)在要做的事染厅，就是將過程遇到的所有技術(shù)編寫成一篇篇的好教程，便于需要它的人不會(huì)遇到我先前遇到的窘境津函。
為什么寫這篇 Blog
起初肖粮，是由于項(xiàng)目的需要，開始正式接觸 dva尔苦。
dva 的開發(fā)模式不同于傳統(tǒng)頁面的開發(fā)涩馆，學(xué)習(xí)起來有一定的技術(shù)門檻。
在 dva 的作者sorrycc Blog 里逗留了數(shù)個(gè)日夜允坚，對(duì)新的開發(fā)模式好像是理解了魂那，于是就迫不及待的下載了一個(gè) demo，準(zhǔn)備開發(fā) CRUD稠项。
故事情節(jié)的發(fā)展往往不會(huì)這么順利涯雅，開發(fā)過程中發(fā)現(xiàn)，學(xué)會(huì) dva 和在項(xiàng)目中使用 dva 進(jìn)行完整開發(fā)完全是兩碼事：因?yàn)轫?xiàng)目不僅僅是代碼開發(fā)展运，還要關(guān)注項(xiàng)目的整體生命周期活逆，代碼規(guī)范，打包上線等等拗胜。
如果你和我一樣蔗候，不能容忍在你的項(xiàng)目存在看不懂的東東，哪怕是一個(gè)配置文件挤土，存在必有價(jià)值琴庵，不明白的東東就該 DELETE 掉，那么來到這里就對(duì)了仰美，本文就是對(duì) dva 做一次“大手術(shù)”迷殿，肢解它的技術(shù)組成，掌握項(xiàng)目中的 dva咖杂。
項(xiàng)目中的 dva
目錄
- 初識(shí) dva
- 語言基礎(chǔ)
- 工具
- 核心技術(shù)
- dva 相關(guān) Git 社區(qū)地址
- 推薦開源項(xiàng)目
dva README.md 之外的文檔
dva 目前還沒有自己的社區(qū) dva 已經(jīng)開放了官網(wǎng)：dva 官網(wǎng)地址诉字，如果學(xué)習(xí)過程中遇到問題可以去 dva 的 github issue 庫去尋找答案懦尝，目前已經(jīng) close 了 1160 個(gè)問題知纷，也就是你遇到的問題大多前人都已遇到過。當(dāng)然也有人不愿意或不熟悉 github 的陵霉，這里也記錄一些作者遇到的坑的解決方法琅轧。
- dva 2.0 版本中如何使用 router 4.0
- dva 2.0中如何使用代碼進(jìn)行路由跳轉(zhuǎn)
- dva 中使用 browserHistory 文檔
- dva 處理頁面加載過渡組件 dva-loading 使用文檔
- dva 中使用自定義 iconfont 注意事項(xiàng)
- dva 更新2.0版本遇到問題匯總
- dva 中進(jìn)行頁面復(fù)用實(shí)踐總結(jié)
- 解決 dva 注銷退出系統(tǒng)后再點(diǎn)擊登入，state 數(shù)據(jù)未清空的問題踊挠？
- dva 中使用 axios 統(tǒng)一攔截錯(cuò)誤示例
備注
如果你有關(guān)于 dva 的問題乍桂，歡迎下方留言。
最后
打個(gè)廣告效床，最近忽悠了個(gè)程序媛入行睹酌，她也在簡(jiǎn)書記錄自己學(xué)習(xí)歷程，希望看到這里的看官們可以去 她的簡(jiǎn)書主頁 點(diǎn)個(gè)關(guān)注剩檀，給入門者一點(diǎn)小小的鼓勵(lì)憋沿。
