home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-15 07:46:41 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
19de483003c91739e9f40c246fd7402d26d2bead
ant-design/docs/react/getting-started-cn.html
T
afc163 19de483003 Updates
2017-02-28 22:10:14 +08:00

156 lines
59 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
const testKey = 'test';
const storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || navigator.language;
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1684223705"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/index-cn" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">搜索组件...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="23"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="24"><div class="ant-select-selection__rendered" data-reactid="25"><div class="ant-select-selection-selected-value" title="2.7.4" style="display:block;opacity:1;" data-reactid="26">2.7.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="27"><b data-reactid="28"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="29"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/index-cn" data-reactid="31"><span data-reactid="32">首页</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/spec/introduce-cn" data-reactid="34"><span data-reactid="35">规范</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="36"><a href="/docs/react/introduce-cn" data-reactid="37"><span data-reactid="38">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/pattern/navigation-cn" data-reactid="40"><span data-reactid="41">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="42"><a href="/docs/resource/download-cn" data-reactid="43"><span data-reactid="44">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="45"><div class="ant-row" data-reactid="46"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="47"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="48"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="49"><a href="/docs/react/introduce-cn" data-reactid="50">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="51"><a href="/docs/react/getting-started-cn" data-reactid="52">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/practical-projects-cn" data-reactid="54">项目实战</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/use-with-create-react-app-cn" data-reactid="56">在 create-react-app 中使用</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/customize-theme-cn" data-reactid="58">定制主题</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/changelog-cn" data-reactid="60">更新日志</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/react/recommendation-cn" data-reactid="62">社区精选组件</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="64"><!-- react-text: 65 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 66 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="67"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="69"><!-- react-text: 70 -->i18n 方案<!-- /react-text --><!-- react-text: 71 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="72"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="73"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="74"><h4 data-reactid="75">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="76"><li class=" ant-menu-item-group" data-reactid="77"><div class="ant-menu-item-group-title" data-reactid="78">General</div><ul class="ant-menu-item-group-list" data-reactid="79"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="80"><a href="/components/button-cn/" data-reactid="81"><span data-reactid="82">Button</span><span class="chinese" data-reactid="83">按钮</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="84"><a href="/components/icon-cn/" data-reactid="85"><span data-reactid="86">Icon</span><span class="chinese" data-reactid="87">图标</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="88"><div class="ant-menu-item-group-title" data-reactid="89">Layout</div><ul class="ant-menu-item-group-list" data-reactid="90"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/components/grid-cn/" data-reactid="92"><span data-reactid="93">Grid</span><span class="chinese" data-reactid="94">栅格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/components/layout-cn/" data-reactid="96"><span data-reactid="97">Layout</span><span class="chinese" data-reactid="98">布局</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="99"><div class="ant-menu-item-group-title" data-reactid="100">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="101"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="102"><a href="/components/affix-cn/" data-reactid="103"><span data-reactid="104">Affix</span><span class="chinese" data-reactid="105">固钉</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="106"><a href="/components/breadcrumb-cn/" data-reactid="107"><span data-reactid="108">Breadcrumb</span><span class="chinese" data-reactid="109">面包屑</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="110"><a href="/components/back-top-cn/" data-reactid="111"><span data-reactid="112">BackTop</span><span class="chinese" data-reactid="113">回到顶部</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="114"><a href="/components/dropdown-cn/" data-reactid="115"><span data-reactid="116">Dropdown</span><span class="chinese" data-reactid="117">下拉菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="118"><a href="/components/menu-cn/" data-reactid="119"><span data-reactid="120">Menu</span><span class="chinese" data-reactid="121">导航菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="122"><a href="/components/pagination-cn/" data-reactid="123"><span data-reactid="124">Pagination</span><span class="chinese" data-reactid="125">分页</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="126"><a href="/components/steps-cn/" data-reactid="127"><span data-reactid="128">Steps</span><span class="chinese" data-reactid="129">步骤条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="130"><a href="/components/tabs-cn/" data-reactid="131"><span data-reactid="132">Tabs</span><span class="chinese" data-reactid="133">标签页</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="134"><div class="ant-menu-item-group-title" data-reactid="135">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="136"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="137"><a href="/components/auto-complete-cn/" data-reactid="138"><span data-reactid="139">AutoComplete</span><span class="chinese" data-reactid="140">自动完成</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="141"><a href="/components/cascader-cn/" data-reactid="142"><span data-reactid="143">Cascader</span><span class="chinese" data-reactid="144">级联选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="145"><a href="/components/checkbox-cn/" data-reactid="146"><span data-reactid="147">Checkbox</span><span class="chinese" data-reactid="148">多选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="149"><a href="/components/date-picker-cn/" data-reactid="150"><span data-reactid="151">DatePicker</span><span class="chinese" data-reactid="152">日期选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="153"><a href="/components/form-cn/" data-reactid="154"><span data-reactid="155">Form</span><span class="chinese" data-reactid="156">表单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="157"><a href="/components/input-number-cn/" data-reactid="158"><span data-reactid="159">InputNumber</span><span class="chinese" data-reactid="160">数字输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="161"><a href="/components/input-cn/" data-reactid="162"><span data-reactid="163">Input</span><span class="chinese" data-reactid="164">输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="165"><a href="/components/mention-cn/" data-reactid="166"><span data-reactid="167">Mention</span><span class="chinese" data-reactid="168">提及</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="169"><a href="/components/rate-cn/" data-reactid="170"><span data-reactid="171">Rate</span><span class="chinese" data-reactid="172">评分</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="173"><a href="/components/radio-cn/" data-reactid="174"><span data-reactid="175">Radio</span><span class="chinese" data-reactid="176">单选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="177"><a href="/components/select-cn/" data-reactid="178"><span data-reactid="179">Select</span><span class="chinese" data-reactid="180">选择器</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="181"><a href="/components/slider-cn/" data-reactid="182"><span data-reactid="183">Slider</span><span class="chinese" data-reactid="184">滑动输入条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="185"><a href="/components/switch-cn/" data-reactid="186"><span data-reactid="187">Switch</span><span class="chinese" data-reactid="188">开关</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="189"><a href="/components/tree-select-cn/" data-reactid="190"><span data-reactid="191">TreeSelect</span><span class="chinese" data-reactid="192">树选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="193"><a href="/components/time-picker-cn/" data-reactid="194"><span data-reactid="195">TimePicker</span><span class="chinese" data-reactid="196">时间选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="197"><a href="/components/transfer-cn/" data-reactid="198"><span data-reactid="199">Transfer</span><span class="chinese" data-reactid="200">穿梭框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="201"><a href="/components/upload-cn/" data-reactid="202"><span data-reactid="203">Upload</span><span class="chinese" data-reactid="204">上传</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="205"><div class="ant-menu-item-group-title" data-reactid="206">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="207"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="208"><a href="/components/badge-cn/" data-reactid="209"><span data-reactid="210">Badge</span><span class="chinese" data-reactid="211">徽标数</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="212"><a href="/components/calendar-cn/" data-reactid="213"><span data-reactid="214">Calendar</span><span class="chinese" data-reactid="215">日历</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="216"><a href="/components/card-cn/" data-reactid="217"><span data-reactid="218">Card</span><span class="chinese" data-reactid="219">卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="220"><a href="/components/carousel-cn/" data-reactid="221"><span data-reactid="222">Carousel</span><span class="chinese" data-reactid="223">走马灯</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="224"><a href="/components/collapse-cn/" data-reactid="225"><span data-reactid="226">Collapse</span><span class="chinese" data-reactid="227">折叠面板</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="228"><a href="/components/popover-cn/" data-reactid="229"><span data-reactid="230">Popover</span><span class="chinese" data-reactid="231">气泡卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="232"><a href="/components/tooltip-cn/" data-reactid="233"><span data-reactid="234">Tooltip</span><span class="chinese" data-reactid="235">文字提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="236"><a href="/components/table-cn/" data-reactid="237"><span data-reactid="238">Table</span><span class="chinese" data-reactid="239">表格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="240"><a href="/components/tag-cn/" data-reactid="241"><span data-reactid="242">Tag</span><span class="chinese" data-reactid="243">标签</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="244"><a href="/components/timeline-cn/" data-reactid="245"><span data-reactid="246">Timeline</span><span class="chinese" data-reactid="247">时间轴</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="248"><a href="/components/tree-cn/" data-reactid="249"><span data-reactid="250">Tree</span><span class="chinese" data-reactid="251">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="252"><div class="ant-menu-item-group-title" data-reactid="253">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="254"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="255"><a href="/components/alert-cn/" data-reactid="256"><span data-reactid="257">Alert</span><span class="chinese" data-reactid="258">警告提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="259"><a href="/components/modal-cn/" data-reactid="260"><span data-reactid="261">Modal</span><span class="chinese" data-reactid="262">对话框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="263"><a href="/components/message-cn/" data-reactid="264"><span data-reactid="265">Message</span><span class="chinese" data-reactid="266">全局提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="267"><a href="/components/notification-cn/" data-reactid="268"><span data-reactid="269">Notification</span><span class="chinese" data-reactid="270">通知提醒框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="271"><a href="/components/progress-cn/" data-reactid="272"><span data-reactid="273">Progress</span><span class="chinese" data-reactid="274">进度条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="275"><a href="/components/popconfirm-cn/" data-reactid="276"><span data-reactid="277">Popconfirm</span><span class="chinese" data-reactid="278">气泡确认框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="279"><a href="/components/spin-cn/" data-reactid="280"><span data-reactid="281">Spin</span><span class="chinese" data-reactid="282">加载中</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="283"><div class="ant-menu-item-group-title" data-reactid="284">Other</div><ul class="ant-menu-item-group-list" data-reactid="285"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="286"><a href="/components/anchor-cn/" data-reactid="287"><span data-reactid="288">Anchor</span><span class="chinese" data-reactid="289">锚点</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="290"><a href="/components/locale-provider-cn/" data-reactid="291"><span data-reactid="292">LocaleProvider</span><span class="chinese" data-reactid="293">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="294"><article class="markdown" data-reactid="295"><h1 data-reactid="296"><!-- react-text: 297 -->快速上手<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/getting-started.zh-CN.md" data-reactid="298"><i class="anticon anticon-edit" data-reactid="299"></i></a></h1><section class="markdown" data-reactid="300"><p data-reactid="301"><!-- react-text: 302 -->Ant Design React 致力于提供给程序员<!-- /react-text --><strong data-reactid="303"><!-- react-text: 304 -->愉悦<!-- /react-text --></strong><!-- react-text: 305 -->的开发体验。<!-- /react-text --></p></section><section class="toc" data-reactid="306"><ul data-reactid="307"><li data-reactid="308"><a class="bisheng-toc-h2" href="#第一个例子" data-reactid="309"><!-- react-text: 310 -->第一个例子<!-- /react-text --></a></li><li data-reactid="311"><a class="bisheng-toc-h2" href="#标准开发" data-reactid="312"><!-- react-text: 313 -->标准开发<!-- /react-text --></a></li><li data-reactid="314"><a class="bisheng-toc-h2" href="#兼容性" data-reactid="315"><!-- react-text: 316 -->兼容性<!-- /react-text --></a></li><li data-reactid="317"><a class="bisheng-toc-h2" href="#自行构建" data-reactid="318"><!-- react-text: 319 -->自行构建<!-- /react-text --></a></li><li data-reactid="320"><a class="bisheng-toc-h2" href="#按需加载" data-reactid="321"><!-- react-text: 322 -->按需加载<!-- /react-text --></a></li><li data-reactid="323"><a class="bisheng-toc-h2" href="#配置主题和字体" data-reactid="324"><!-- react-text: 325 -->配置主题和字体<!-- /react-text --></a></li><li data-reactid="326"><a class="bisheng-toc-h2" href="#小甜点" data-reactid="327"><!-- react-text: 328 -->小甜点<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="329"><p data-reactid="330"><!-- react-text: 331 -->在开始之前，推荐先学习 <!-- /react-text --><a href="http://facebook.github.io/react/" data-reactid="332"><!-- react-text: 333 -->React<!-- /react-text --></a><!-- react-text: 334 --> 和 <!-- /react-text --><a href="http://babeljs.io/docs/learn-es2015/" data-reactid="335"><!-- react-text: 336 -->ES2015<!-- /react-text --></a><!-- react-text: 337 -->，并确认 已经正确安装和配置了 <!-- /react-text --><a href="https://nodejs.org/" data-reactid="338"><!-- react-text: 339 -->Node.js<!-- /react-text --></a><!-- react-text: 340 --> v4.x 或以上。<!-- /react-text --></p><h2 id="第一个例子" data-reactid="341"><span data-reactid="342"><!-- react-text: 343 -->第一个例子<!-- /react-text --></span><a href="#第一个例子" class="anchor" data-reactid="344">#</a></h2><p data-reactid="345"><!-- react-text: 346 -->最简单的使用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 <!-- /react-text --><code data-reactid="347"><!-- react-text: 348 -->Bug Report<!-- /react-text --></code><!-- react-text: 349 -->，注意不要在实际项目中这样使用。<!-- /react-text --></p><ul data-reactid="350"><li data-reactid="351"><p data-reactid="352"><a href="http://codepen.io/benjycui/pen/KgPZrE?editors=001" data-reactid="353"><!-- react-text: 354 -->antd CodePen<!-- /react-text --></a></p></li></ul><h2 id="标准开发" data-reactid="355"><span data-reactid="356"><!-- react-text: 357 -->标准开发<!-- /react-text --></span><a href="#标准开发" class="anchor" data-reactid="358">#</a></h2><p data-reactid="359"><!-- react-text: 360 -->实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
我们提供了一套 <!-- /react-text --><code data-reactid="361"><!-- react-text: 362 -->npm<!-- /react-text --></code><!-- react-text: 363 --> + <!-- /react-text --><code data-reactid="364"><!-- react-text: 365 -->webpack<!-- /react-text --></code><!-- react-text: 366 --> 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。<!-- /react-text --></p><h3 id="1.-安装脚手架工具" data-reactid="367"><span data-reactid="368"><!-- react-text: 369 -->1. 安装脚手架工具<!-- /react-text --></span><a href="#1.-安装脚手架工具" class="anchor" data-reactid="370">#</a></h3><p data-reactid="371"><a href="https://github.com/ant-design/antd-init/" data-reactid="372"><!-- react-text: 373 -->antd-init<!-- /react-text --></a><!-- react-text: 374 --> 是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用 <!-- /react-text --><a href="https://github.com/dvajs/dva-cli" data-reactid="375"><!-- react-text: 376 -->dva-cli<!-- /react-text --></a><!-- react-text: 377 -->。<!-- /react-text --></p><pre class="language-bash" data-reactid="378"><code data-reactid="379">$ <span class="token function">npm</span> <span class="token function">install</span> antd-init -g</code></pre><p data-reactid="380"><!-- react-text: 381 -->更多功能请参考 <!-- /react-text --><a href="https://github.com/ant-design/antd-init/" data-reactid="382"><!-- react-text: 383 -->脚手架工具<!-- /react-text --></a><!-- react-text: 384 --> 和 <!-- /react-text --><a href="http://ant-tool.github.io/" data-reactid="385"><!-- react-text: 386 -->开发工具文档<!-- /react-text --></a><!-- react-text: 387 -->。<!-- /react-text --></p><blockquote data-reactid="388"><p data-reactid="389"><!-- react-text: 390 -->除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：<!-- /react-text --></p><ul data-reactid="391"><li data-reactid="392"><p data-reactid="393"><a href="https://github.com/JasonBai007/reactSPA" data-reactid="394"><!-- react-text: 395 -->reactSPA<!-- /react-text --></a></p></li><li data-reactid="396"><p data-reactid="397"><a href="https://github.com/Justin-lu/react-redux-antd" data-reactid="398"><!-- react-text: 399 -->react-redux-antd by Justin-lu<!-- /react-text --></a></p></li><li data-reactid="400"><p data-reactid="401"><a href="https://github.com/okoala/react-redux-antd" data-reactid="402"><!-- react-text: 403 -->react-redux-antd by okoala<!-- /react-text --></a></p></li><li data-reactid="404"><p data-reactid="405"><a href="https://github.com/fireyy/react-antd-admin" data-reactid="406"><!-- react-text: 407 -->react-antd-admin<!-- /react-text --></a></p></li><li data-reactid="408"><p data-reactid="409"><a href="https://github.com/yuzhouisme/react-antd-redux-router-starter" data-reactid="410"><!-- react-text: 411 -->react-antd-redux-router-starter<!-- /react-text --></a></p></li><li data-reactid="412"><p data-reactid="413"><a href="https://github.com/BetaRabbit/react-redux-antd-starter" data-reactid="414"><!-- react-text: 415 -->react-redux-antd-starter<!-- /react-text --></a></p></li><li data-reactid="416"><p data-reactid="417"><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="418"><!-- react-text: 419 -->更多<!-- /react-text --></a></p></li></ul></blockquote><h3 id="2.-创建一个项目" data-reactid="420"><span data-reactid="421"><!-- react-text: 422 -->2. 创建一个项目<!-- /react-text --></span><a href="#2.-创建一个项目" class="anchor" data-reactid="423">#</a></h3><p data-reactid="424"><!-- react-text: 425 -->使用命令行进行初始化。<!-- /react-text --></p><pre class="language-bash" data-reactid="426"><code data-reactid="427">$ <span class="token function">mkdir</span> antd-demo <span class="token operator">&amp;&amp;</span> <span class="token function">cd</span> antd-demo
$ antd-init</code></pre><p data-reactid="428"><!-- react-text: 429 -->antd-init 会自动安装 npm 依赖，若有问题则可自行安装。<!-- /react-text --></p><p data-reactid="430"><!-- react-text: 431 -->若安装缓慢报错，可尝试用 <!-- /react-text --><code data-reactid="432"><!-- react-text: 433 -->cnpm<!-- /react-text --></code><!-- react-text: 434 --> 或别的镜像源自行安装：<!-- /react-text --><code data-reactid="435"><!-- react-text: 436 -->rm -rf node_modules &amp;&amp; cnpm install<!-- /react-text --></code><!-- react-text: 437 -->。<!-- /react-text --></p><h3 id="3.-使用组件" data-reactid="438"><span data-reactid="439"><!-- react-text: 440 -->3. 使用组件<!-- /react-text --></span><a href="#3.-使用组件" class="anchor" data-reactid="441">#</a></h3><p data-reactid="442"><!-- react-text: 443 -->脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。<!-- /react-text --></p><p data-reactid="444"><!-- react-text: 445 -->直接用下面的代码替换 <!-- /react-text --><code data-reactid="446"><!-- react-text: 447 -->index.js<!-- /react-text --></code><!-- react-text: 448 --> 的内容，用 React 的方式直接使用 antd 组件。<!-- /react-text --></p><pre class="language-jsx" data-reactid="449"><code data-reactid="450"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> message <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
date<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">handleChange</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span>
message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'您选择的日期是: '</span> <span class="token operator">+</span> date<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> date <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> margin<span class="token punctuation">:</span> <span class="token string">'100px auto'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DatePicker</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token punctuation">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>当前日期：<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><blockquote data-reactid="451"><p data-reactid="452"><!-- react-text: 453 -->你可以在左侧菜单选用更多组件。<!-- /react-text --></p></blockquote><h3 id="4.-开发调试" data-reactid="454"><span data-reactid="455"><!-- react-text: 456 -->4. 开发调试<!-- /react-text --></span><a href="#4.-开发调试" class="anchor" data-reactid="457">#</a></h3><p data-reactid="458"><!-- react-text: 459 -->一键启动调试，访问 <!-- /react-text --><a href="http://127.0.0.1:8000" data-reactid="460"><!-- react-text: 461 -->http://127.0.0.1:8000<!-- /react-text --></a><!-- react-text: 462 --> 查看效果。<!-- /react-text --></p><pre class="language-bash" data-reactid="463"><code data-reactid="464">$ <span class="token function">npm</span> start</code></pre><h3 id="5.-构建和部署" data-reactid="465"><span data-reactid="466"><!-- react-text: 467 -->5. 构建和部署<!-- /react-text --></span><a href="#5.-构建和部署" class="anchor" data-reactid="468">#</a></h3><pre class="language-bash" data-reactid="469"><code data-reactid="470">$ <span class="token function">npm</span> run build</code></pre><p data-reactid="471"><!-- react-text: 472 -->入口文件会构建到 <!-- /react-text --><code data-reactid="473"><!-- react-text: 474 -->dist<!-- /react-text --></code><!-- react-text: 475 --> 目录中，你可以自由部署到不同环境中进行引用。<!-- /react-text --></p><blockquote data-reactid="476"><p data-reactid="477"><!-- react-text: 478 -->上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。<!-- /react-text --></p></blockquote><h2 id="兼容性" data-reactid="479"><span data-reactid="480"><!-- react-text: 481 -->兼容性<!-- /react-text --></span><a href="#兼容性" class="anchor" data-reactid="482">#</a></h2><p data-reactid="483"><!-- react-text: 484 -->Ant Design React 支持所有的现代浏览器和 IE9+。<!-- /react-text --></p><p data-reactid="485"><!-- react-text: 486 -->对于 IE 系列浏览器，需要提供 <!-- /react-text --><a href="https://github.com/es-shims/es5-shim" data-reactid="487"><!-- react-text: 488 -->es5-shim<!-- /react-text --></a><!-- react-text: 489 --> 和 <!-- /react-text --><a href="https://github.com/paulmillr/es6-shim" data-reactid="490"><!-- react-text: 491 -->es6-shim<!-- /react-text --></a><!-- react-text: 492 --> 等 Polyfills 的支持。如果你使用了 babel，强烈推荐使用 <!-- /react-text --><a href="https://babeljs.io/docs/usage/polyfill/" data-reactid="493"><!-- react-text: 494 -->babel-polyfill<!-- /react-text --></a><!-- react-text: 495 --> 和 <!-- /react-text --><a href="https://babeljs.io/docs/plugins/transform-runtime/" data-reactid="496"><!-- react-text: 497 -->babel-plugin-transform-runtime<!-- /react-text --></a><!-- react-text: 498 -->。<!-- /react-text --></p><blockquote data-reactid="499"><p data-reactid="500"><!-- react-text: 501 -->如果在 IE 浏览器中遇到 <!-- /react-text --><code data-reactid="502"><!-- react-text: 503 -->startsWith<!-- /react-text --></code><!-- react-text: 504 --> 的<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445" data-reactid="505"><!-- react-text: 506 -->问题<!-- /react-text --></a><!-- react-text: 507 -->，请引入 <!-- /react-text --><a href="https://github.com/paulmillr/es6-shim" data-reactid="508"><!-- react-text: 509 -->es6-shim<!-- /react-text --></a><!-- react-text: 510 --> 或 <!-- /react-text --><a href="https://babeljs.io/docs/usage/polyfill/" data-reactid="511"><!-- react-text: 512 -->babel-polyfill<!-- /react-text --></a><!-- react-text: 513 -->。<!-- /react-text --></p></blockquote><pre class="language-html" data-reactid="514"><code data-reactid="515"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- 引入样式 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/index.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- Polyfills --></span>
<span class="token comment" spellcheck="true">&lt;!--[if lt IE 10]>
&lt;script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js">&lt;/script>
&lt;![endif]--></span>
<span class="token comment" spellcheck="true">&lt;!--[if lte IE 11]>
&lt;script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js">&lt;/script>
&lt;![endif]--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- 引入公用文件 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/common.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true">&lt;!-- 引入入口文件 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre><h4 id="IE8-note" data-reactid="516"><span data-reactid="517"><!-- react-text: 518 -->IE8 note<!-- /react-text --></span><a href="#IE8-note" class="anchor" data-reactid="519">#</a></h4><blockquote data-reactid="520"><p data-reactid="521"><code data-reactid="522"><!-- react-text: 523 -->antd@2.0<!-- /react-text --></code><!-- react-text: 524 --> 之后将不再支持 IE8。<!-- /react-text --></p></blockquote><p data-reactid="525"><!-- react-text: 526 -->IE8 需要配合使用 <!-- /react-text --><a href="https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html" data-reactid="527"><!-- react-text: 528 -->react@0.14.x<!-- /react-text --></a><!-- react-text: 529 --> 版本。<!-- /react-text --></p><p data-reactid="530"><!-- react-text: 531 -->另外，由于 <!-- /react-text --><code data-reactid="532"><!-- react-text: 533 -->babel@6.x<!-- /react-text --></code><!-- react-text: 534 --> 对 IE8 的支持不佳，你可能会遇到类似 <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/issues/28" data-reactid="535"><!-- react-text: 536 -->#28<!-- /react-text --></a><!-- react-text: 537 --> 和 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/858" data-reactid="538"><!-- react-text: 539 -->#858<!-- /react-text --></a><!-- react-text: 540 --> 的 default 报错的问题，你也可以参照这个 <!-- /react-text --><a href="https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8" data-reactid="541"><!-- react-text: 542 -->webpack 配置<!-- /react-text --></a><!-- react-text: 543 --> 来解决。<!-- /react-text --></p><blockquote data-reactid="544"><p data-reactid="545"><!-- react-text: 546 -->更多 IE8 下使用 React 的相关问题可以参考：<!-- /react-text --><a href="https://github.com/xcatliu/react-ie8" data-reactid="547"><!-- react-text: 548 -->https://github.com/xcatliu/react-ie8<!-- /react-text --></a></p></blockquote><h2 id="自行构建" data-reactid="549"><span data-reactid="550"><!-- react-text: 551 -->自行构建<!-- /react-text --></span><a href="#自行构建" class="anchor" data-reactid="552">#</a></h2><p data-reactid="553"><!-- react-text: 554 -->如果想自己维护工作流，我们推荐使用 <!-- /react-text --><a href="http://webpack.github.io/" data-reactid="555"><!-- react-text: 556 -->webpack<!-- /react-text --></a><!-- react-text: 557 --> 进行构建和调试。理论上你可以利用 React 生态圈中的 <!-- /react-text --><a href="https://github.com/enaqx/awesome-react#boilerplates" data-reactid="558"><!-- react-text: 559 -->各种脚手架<!-- /react-text --></a><!-- react-text: 560 --> 进行开发，如果遇到问题可参考我们所使用的 <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" data-reactid="561"><!-- react-text: 562 -->webpack 配置<!-- /react-text --></a><!-- react-text: 563 --> 进行 <!-- /react-text --><a href="http://ant-tool.github.io/webpack-config.html" data-reactid="564"><!-- react-text: 565 -->定制<!-- /react-text --></a><!-- react-text: 566 -->。<!-- /react-text --></p><p data-reactid="567"><!-- react-text: 568 -->目前社区也有很多基于 antd 定制的 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="569"><!-- react-text: 570 -->脚手架<!-- /react-text --></a><!-- react-text: 571 -->，欢迎进行试用和贡献。<!-- /react-text --></p><h2 id="按需加载" data-reactid="572"><span data-reactid="573"><!-- react-text: 574 -->按需加载<!-- /react-text --></span><a href="#按需加载" class="anchor" data-reactid="575">#</a></h2><p data-reactid="576"><!-- react-text: 577 -->如果你在控制台看到下面的提示，则你可能使用了 <!-- /react-text --><code data-reactid="578"><!-- react-text: 579 -->import { Button } from &#x27;antd&#x27;;<!-- /react-text --></code><!-- react-text: 580 --> 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。<!-- /react-text --></p><blockquote data-reactid="581"><p data-reactid="582"><img src="https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png" data-reactid="583"/></p></blockquote><p data-reactid="584"><!-- react-text: 585 -->可以通过以下的写法来按需加载组件。<!-- /react-text --></p><pre class="language-jsx" data-reactid="586"><code data-reactid="587"><span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'antd/lib/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'antd/lib/button/style'</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 或者 antd/lib/button/style/css 加载 css 文件</span></code></pre><p data-reactid="588"><!-- react-text: 589 -->如果你使用了 babel，那么可以使用 <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="590"><!-- react-text: 591 -->babel-plugin-import<!-- /react-text --></a><!-- react-text: 592 --> 来进行按需加载，加入这个插件后。你可以仍然这么写：<!-- /react-text --></p><pre class="language-jsx" data-reactid="593"><code data-reactid="594"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span></code></pre><p data-reactid="595"><!-- react-text: 596 -->插件会帮你转换成 <!-- /react-text --><code data-reactid="597"><!-- react-text: 598 -->antd/lib/xxx<!-- /react-text --></code><!-- react-text: 599 --> 的写法。另外此插件配合 <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import#usage" data-reactid="600"><!-- react-text: 601 -->style<!-- /react-text --></a><!-- react-text: 602 --> 属性可以做到模块样式的按需自动加载。<!-- /react-text --></p><h2 id="配置主题和字体" data-reactid="603"><span data-reactid="604"><!-- react-text: 605 -->配置主题和字体<!-- /react-text --></span><a href="#配置主题和字体" class="anchor" data-reactid="606">#</a></h2><ul data-reactid="607"><li data-reactid="608"><p data-reactid="609"><a href="/docs/react/customize-theme-cn" data-reactid="610">改变主题</a></p></li><li data-reactid="611"><p data-reactid="612"><a href="https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont" data-reactid="613"><!-- react-text: 614 -->使用本地字体<!-- /react-text --></a></p></li></ul><h2 id="小甜点" data-reactid="615"><span data-reactid="616"><!-- react-text: 617 -->小甜点<!-- /react-text --></span><a href="#小甜点" class="anchor" data-reactid="618">#</a></h2><ul data-reactid="619"><li data-reactid="620"><p data-reactid="621"><!-- react-text: 622 -->你可以享用 <!-- /react-text --><code data-reactid="623"><!-- react-text: 624 -->npm<!-- /react-text --></code><!-- react-text: 625 --> 生态圈里的所有模块。<!-- /react-text --></p></li><li data-reactid="626"><p data-reactid="627"><!-- react-text: 628 -->我们使用了 <!-- /react-text --><code data-reactid="629"><!-- react-text: 630 -->babel<!-- /react-text --></code><!-- react-text: 631 -->，试试用 <!-- /react-text --><a href="http://babeljs.io/blog/2015/06/07/react-on-es6-plus" data-reactid="632"><!-- react-text: 633 -->ES2015<!-- /react-text --></a><!-- react-text: 634 --> 的写法来提升编码的愉悦感。<!-- /react-text --></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="635"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="636"><section class="prev-next-nav" data-reactid="637"><a class="prev-page" href="/docs/react/introduce-cn" data-reactid="638">Ant Design of React</a><a class="next-page" href="/docs/react/practical-projects-cn" data-reactid="639">项目实战</a></section></div></div></div><footer id="footer" data-reactid="640"><ul data-reactid="641"><li data-reactid="642"><h2 data-reactid="643"><i class="anticon anticon-github" data-reactid="644"></i><!-- react-text: 645 --> GitHub<!-- /react-text --></h2><div data-reactid="646"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="647"><span data-reactid="648">仓库</span></a></div><div data-reactid="649"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="650"><span data-reactid="651">定制主题</span></a></div><div data-reactid="652"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="653"><span data-reactid="654">Awesome Ant Design</span></a></div></li><li data-reactid="655"><h2 data-reactid="656"><i class="anticon anticon-link" data-reactid="657"></i><!-- react-text: 658 --> <!-- /react-text --><span data-reactid="659">相关站点</span></h2><div data-reactid="660"><a href="http://mobile.ant.design" data-reactid="661">Ant Design Mobile</a><span data-reactid="662"> - </span><span data-reactid="663">移动版</span></div><div data-reactid="664"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="665">dva</a><!-- react-text: 666 --> - <!-- /react-text --><span data-reactid="667">应用框架</span></div><div data-reactid="668"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="669">dva-cli</a><!-- react-text: 670 --> -<!-- /react-text --><span data-reactid="671">开发工具</span></div><div data-reactid="672"><a href="https://antv.alipay.com/" data-reactid="673">AntV</a><span data-reactid="674"> - </span><span data-reactid="675">数据可视化</span></div><div data-reactid="676"><a href="http://motion.ant.design" data-reactid="677">Ant Motion</a><span data-reactid="678"> - </span><span data-reactid="679">设计动效</span></div><div data-reactid="680"><a href="http://library.ant.design/" data-reactid="681">AntD Library</a><span data-reactid="682"> - </span><span data-reactid="683">Axure 部件库</span></div><div data-reactid="684"><a href="http://ux.ant.design" data-reactid="685">Ant UX</a><span data-reactid="686"> - </span><span data-reactid="687">页面逻辑素材</span></div></li><li data-reactid="688"><h2 data-reactid="689"><i class="anticon anticon-customer-service" data-reactid="690"></i><!-- react-text: 691 --> <!-- /react-text --><span data-reactid="692">社区</span></h2><div data-reactid="693"><a rel="noopener noreferrer" href="/changelog" data-reactid="694"><span data-reactid="695">更新记录</span></a></div><div data-reactid="696"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="697"><span data-reactid="698">常见问题</span></a></div><div data-reactid="699"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="700"><span data-reactid="701">在线讨论</span></a></div><div data-reactid="702"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="703"><span data-reactid="704">报告 Bug</span></a></div><div data-reactid="705"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="706"><span data-reactid="707">StackOverflow</span></a></div><div data-reactid="708"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="709"><span data-reactid="710">SegmentFault</span></a></div></li><li data-reactid="711"><h2 data-reactid="712"><!-- react-text: 713 -->Copyright © <!-- /react-text --><!-- react-text: 714 -->2017<!-- /react-text --></h2><div data-reactid="715"><span data-reactid="716">蚂蚁金服体验技术部出品</span></div><div data-reactid="717"><!-- react-text: 718 -->Built with <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="719">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink