引入Ant Design?

Ant Design 是一個服務于企業級產品的設計體系，組件庫是它的 React 實現，antd 被發布為一個 npm 包方便開發者安裝并使用。

在 umi 中，你可以通過在插件集 umi-plugin-react 中配置 antd 打開 antd 插件，antd?插件會幫你引入 antd 并實現按需編譯。

在config.js文件中進行配置：

//導出一個對象，暫時設置為空對象，后面再填充內容 export default {plugins: [['umi-plugin-react', {//暫時不啟用任何功能dva : true , //開啟了dva功能,antd : true}]] };

小試牛刀

接下來，我們開始使用antd的組件，以tabs組件為例，地址：https://ant.design/components/tabs-cn/

import React from 'react'; import { Tabs } from 'antd'; // 第一步，導入需要使用的組件const TabPane = Tabs.TabPane;function callback(key) {console.log(key); }class MyTabs extends React.Component{render(){return (<Tabs defaultActiveKey="1" onChange={callback}><TabPane tab="Tab 1" key="1">hello antd wo de 第一個 tabs</TabPane><TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane><TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane></Tabs>)}}export default MyTabs;

?

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Ant Design入门之开始使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。