andt-pro:搭建一個ant-design-pro項目(模板)

序言

每天得生活都要繼續,每天的學習不能放棄,最近開始學習下umi/dva/antd的後臺管理系統,首推自然是antd-pro了,有些朋友應該比較熟悉這個了,就不多說,直接正言介紹,下面的主線都是antd-pro的搭建;

準備

Create umi

創建antd-pro或dva項目的腳手架

dva

dva 首先是一個基於 redux 和 redux-saga 的數據流方案,
然後爲了簡化開發體驗,dva 還額外內置了 react-router 和 fetch ,
所以也可以理解爲一個輕量級的應用框架。

umi

Umi,中文可發音爲烏米,是可擴展的企業級前端應用框架。Umi 以路由爲基礎的,
同時支持配置式路由和約定式路由,保證路由的功能完備,並以此進行功能擴展。
然後配以生命週期完善的插件體系,覆蓋從源碼到構建產物的每個生命週期,
支持各種功能擴展和業務需求。

正文

1.在創建的項目文件下使用cmd運行create umi

npm create umi

2.選擇antd-pro

3.選擇ts/js(新手用js比較好)

4.用ant4?

5.進入到創建的項目中,然後用cnpm install再npm start

6.最後效果

關鍵文件

config/config.js
項目的配置文件,詳情配置請參考umi的配置頁面
內部有路由模塊:routes

src/models
dva的model的文件放置地

src/pages
業務代碼的頁面

運行流程

主要看下umi的文檔,瞭解下各個模塊所負責的

參考資料

create umi的npm地址

dva地址

umi地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章