ant design 專案例項

安裝 umi ui | 建立新應用

參考官網

第一步：新建路由

建立路由：

umi g page products

第二步：編寫 ui component

在編輯器中開啟，新建src/components/productlist.js檔案

import  from 'antd';

const productlist = () => ,
>
delete
);},
},];
return ;
};export default productlist;

完成 ui 介面後，開始處理資料和邏輯

新建 modelsrc/models/products.js

export default ) ,

},};

注意

umi 中約定src/models下的model會被自動注入，無需手動注入

第四步：在 pages 檔案中 connect 一下

編輯src/pages/products.js，替換為下面的內容

import  from 'dva';

import productlist from '../components/productlist';
const products = () => );
}  return (
);};export default connect(() => ())(products);

要讓整個應用跑起來，還需要定義下初始資料

export const dva = ,

initialstate: , ],
},},
};

全家桶 Ant Design再次開發專案

本文參自開源專案 此 blog react admin 專案是基於螞蟻金服開源的 ant design pro之上，用 react 全家桶 ant design 的進行再次開發的，專案已經開源。效果預覽 開箱即用的中颱前端 設計解決方案。ant design pro 是基於 ant design 和...

Ant Design主題定製

先介紹下專案背景 如果是採用antd init或antd cli腳手架初始化的專案，可以直接設定theme，相對比較簡單。我的專案框架是react redux，採用webpack打包，在開發環境是用 webpack dev中介軟體配合webpack hot中介軟體執行專案與記憶體中訪問，不在專案本地...

ant design彩蛋思考

今天ant design由於在 中隱藏了乙個聖誕彩蛋，引發了廣大人民群眾的各種感官，大多數都在叫罵。有人說屁大點小事，不值一提。有人說因為這個彩蛋涉及宗教色彩可能會引發一些重大影響。吃完飯去翻了翻repo的issue,真的是什麼人都有 對於我自己而言，當前專案用的還是3.5.x,所以沒有什麼影響。作...