6. 使用antd pro構建web頁面

前言

在開始以前，但願咱們已經掌握了一部分react的知識，因爲沒有太多經驗，其實我也是屬於摸索階段。這裏假定咱們已經瞭解了react，redux和dva/umi相關的知識。並有作過相關練習。

若是還不瞭解以上相關的知識，建議去如下網站學習一遍，下面給出一個大概學習的路線吧。

• html/css/js

  這裏推薦你們去w3cschool稍做了解，不過看本篇文章的同窗確定都是有必定基礎的。那麼就當作鞏固好了。

• es6

  這裏我沒有系統看過教程，我是在一本叫作react學習手冊的書上面看到的。這裏仍是放一下地址吧，能夠去阮一峯老師的博客看，也能夠去這裏學習es6的一些新特性。好比箭頭函數，promise，let等。

• react+redux

  react的話，一開始我幾乎是沒有入門。拿着react-element裏的demo就開始實操了，遇到了各類各樣的問題。在尋找solution的時候遇到了一本名曰react小書的教程，以爲實在是再合適不過了。同時裏面還有redux的部分教程(第三部分)。

• dva

  dva是一個封裝了redux和router等方法的框架，掌握了它的api，能夠快速完成react項目的開發。具體教程還請看 官網dvajs。

antd pro介紹

antd是ant design的縮寫，顧名思義，它是螞蟻金服的前端設計團隊出品的一款UI組件庫，若是要類比的話，我會把他比做bootstrap，可是它又遠遠比bootstrap好看且交互性更強。而antd pro，就是它的專業版。爲何呢，由於antd pro已是一個完整的中後臺項目，咱們若是須要快速開發的話，直接拿着裏面的頁面修改即是了。可是我我的總結了一下，缺點也很明顯，就是antd pro作出來的系統幾乎都長一個樣，長久了會有審美疲勞，至少我對bootstrap也是這樣的，固然螞蟻出的東西品質是真的棒！

話很少說，先看看它的預覽頁面。

如下是隨便截取的幾個圖片，感覺一下它的美。

下載antd pro

以上內容均來自antd pro官網。

第一步: 克隆項目，咱們將之克隆到Lamb的client目錄下，因爲我不想在Lamb中建立2個git項目，因此我選擇去github下載代碼。

若是你想隨時升級antd pro或者給它們提pull requests，則執行如下命令。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

下載後解壓並放入Lamb/client目錄。

安裝依賴包

• 確保你安裝了nodejs，這樣你就擁有強大的包管理工具npm

• 使用npm安裝cnpm，由於國內有不少資源是訪問受限的，因此須要淘寶開源的cnpm。

  在cmd/shell窗口輸入並回車。

  npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安裝antd pro依賴包

  進入Lamb/client目錄執行命令cnpm install

• 嘗試在本地運行antd pro

  在Lamb/client目錄下輸入npm start並回車

  接着瀏覽器就自動打開了頁面http://localhost:8000，那麼咱們的antd pro就成功部署了。

上一篇: 使用Flask藍圖

下一篇: 給Lamb配置flask-sqlalchemy

github地址: https://github.com/wuranxu/Lamb