Zi 字媒體

在項目開始之前，首先在自己的電腦上安裝一下幾個工具：安裝git，查看git版本： git --version首先，安裝nodejs，安裝完之後，node 版本：node --versionnpm是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><MenudefaultSelectedKeys={['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/，大家可以參考一下安裝，每天一點小知識，希望對大家有所幫助！