Ant-design快速入門，搭建項目環境

在項目開始之前，首先在自己的電腦上安裝一下幾個工具：

安裝git，查看git版本： git --version

首先，安裝nodejs，安裝完之後，node 版本：node --version

npm是Node的模塊管理器，所以安裝Node之後就自帶了的，查看npm版本： npm -v

安裝手腳架： npm install antd-init - g ##在這裡說一下，-g是全局安裝的意思

第一步，打開命令控制台， 創建項目：mkdir antd-test

第二步， 切換到項目目錄下：cd antd-test

第三步， 初始化項目：antd-init

第四步，修改index.js代碼如下：

import React from 'react';

import ReactDOM from 'react-dom';

import { Menu, Icon, Button } from 'antd';

const SubMenu = Menu.SubMenu;

class App extends React.Component {

state = {

collapsed: false,

}

toggleCollapsed = => {

this.setState({

collapsed: !this.state.collapsed,

});

}

render {

return (

<div style={{ width: 240, margin: '100px auto' }}>

<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>

<Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />

</Button>

<Menu

defaultSelectedKeys={['1']}

defaultOpenKeys={['sub1']}

mode="inline"

theme="dark"

inlineCollapsed={this.state.collapsed}

<Menu.Item key="1">

<Icon type="pie-chart" />

<span>Option 1</span>

</Menu.Item>

<Menu.Item key="2">

<Icon type="desktop" />

<span>Option 2</span>

</Menu.Item>

<Menu.Item key="3">

<Icon type="inbox" />

<span>Option 3</span>

</Menu.Item>

<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>

<Menu.Item key="5">Option 5</Menu.Item>

<Menu.Item key="6">Option 6</Menu.Item>

<Menu.Item key="7">Option 7</Menu.Item>

<Menu.Item key="8">Option 8</Menu.Item>

</SubMenu>

<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>

<Menu.Item key="9">Option 9</Menu.Item>

<Menu.Item key="10">Option 10</Menu.Item>

<SubMenu key="sub3" title="Submenu">

<Menu.Item key="11">Option 11</Menu.Item>

<Menu.Item key="12">Option 12</Menu.Item>

</SubMenu>

</SubMenu>

</Menu>

</div>

);

}

}

ReactDOM.render(<App />, document.getElementById('root'));

第五步，運行項目：npm run start

第六步，一鍵啟動調試，訪問 http://127.0.0.1:8000 查看效果。

最後，小編也建議大家安裝cnpm國內淘寶鏡像，這樣安裝在我們安裝其他手腳架或者其他的組件的時候會快很多。

這個是淘寶鏡像的網址：https://cnpmjs.org/，大家可以參考一下安裝，每天一點小知識，希望對大家有所幫助！