home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-17 00:36:17 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
340f90bafe29298dada13d431dadcd43c7e79865
ant-design/docs/react/use-with-create-react-app-cn.html
T
afc163 340f90bafe Updates
2017-06-13 15:28:13 +08:00

251 lines
51 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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() {
var testKey = 'test';
var 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.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
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-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.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>
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:473408,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="709870873"><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"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.11.0" style="display:block;opacity:1;" data-reactid="28">2.11.0</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></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="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/index-cn" data-reactid="33"><span data-reactid="34">首页</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce-cn" data-reactid="36"><span data-reactid="37">指引</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="47"><a href="//mobile.ant.design" data-reactid="48"><span data-reactid="49">移动版</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="50"><div class="ant-row" data-reactid="51"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="52"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="53"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/introduce-cn" data-reactid="55">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/react/getting-started-cn" data-reactid="57">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/practical-projects-cn" data-reactid="59">项目实战</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="60"><a href="/docs/react/use-with-create-react-app-cn" data-reactid="61">在 create-react-app 中使用</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/react/customize-theme-cn" data-reactid="63">定制主题</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/changelog-cn" data-reactid="65">更新日志</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/react/recommendation-cn" data-reactid="67">社区精选组件</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/react/i18n-cn" data-reactid="69">国际化</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/components/button-cn/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80">按钮</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon-cn/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84">图标</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid-cn/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91">栅格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="92"><a href="/components/layout-cn/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95">布局</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix-cn/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102">固钉</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/breadcrumb-cn/" data-reactid="104"><span data-reactid="105">Breadcrumb</span><span class="chinese" data-reactid="106">面包屑</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/back-top-cn/" data-reactid="108"><span data-reactid="109">BackTop</span><span class="chinese" data-reactid="110">回到顶部</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown-cn/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114">下拉菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu-cn/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118">导航菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination-cn/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122">分页</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps-cn/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126">步骤条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs-cn/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130">标签页</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete-cn/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137">自动完成</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/cascader-cn/" data-reactid="139"><span data-reactid="140">Cascader</span><span class="chinese" data-reactid="141">级联选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/checkbox-cn/" data-reactid="143"><span data-reactid="144">Checkbox</span><span class="chinese" data-reactid="145">多选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker-cn/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149">日期选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form-cn/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153">表单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input-number-cn/" data-reactid="155"><span data-reactid="156">InputNumber</span><span class="chinese" data-reactid="157">数字输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input-cn/" data-reactid="159"><span data-reactid="160">Input</span><span class="chinese" data-reactid="161">输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention-cn/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165">提及</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/rate-cn/" data-reactid="167"><span data-reactid="168">Rate</span><span class="chinese" data-reactid="169">评分</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/radio-cn/" data-reactid="171"><span data-reactid="172">Radio</span><span class="chinese" data-reactid="173">单选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select-cn/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177">选择器</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider-cn/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181">滑动输入条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch-cn/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185">开关</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/tree-select-cn/" data-reactid="187"><span data-reactid="188">TreeSelect</span><span class="chinese" data-reactid="189">树选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/time-picker-cn/" data-reactid="191"><span data-reactid="192">TimePicker</span><span class="chinese" data-reactid="193">时间选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/transfer-cn/" data-reactid="195"><span data-reactid="196">Transfer</span><span class="chinese" data-reactid="197">穿梭框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload-cn/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201">上传</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/avatar-cn/" data-reactid="206"><span data-reactid="207">Avatar</span><span class="chinese" data-reactid="208">头像</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/badge-cn/" data-reactid="210"><span data-reactid="211">Badge</span><span class="chinese" data-reactid="212">徽标数</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/collapse-cn/" data-reactid="214"><span data-reactid="215">Collapse</span><span class="chinese" data-reactid="216">折叠面板</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/calendar-cn/" data-reactid="218"><span data-reactid="219">Calendar</span><span class="chinese" data-reactid="220">日历</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/card-cn/" data-reactid="222"><span data-reactid="223">Card</span><span class="chinese" data-reactid="224">卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/carousel-cn/" data-reactid="226"><span data-reactid="227">Carousel</span><span class="chinese" data-reactid="228">走马灯</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229"><a href="/components/popover-cn/" data-reactid="230"><span data-reactid="231">Popover</span><span class="chinese" data-reactid="232">气泡卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tooltip-cn/" data-reactid="234"><span data-reactid="235">Tooltip</span><span class="chinese" data-reactid="236">文字提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/table-cn/" data-reactid="238"><span data-reactid="239">Table</span><span class="chinese" data-reactid="240">表格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tag-cn/" data-reactid="242"><span data-reactid="243">Tag</span><span class="chinese" data-reactid="244">标签</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/timeline-cn/" data-reactid="246"><span data-reactid="247">Timeline</span><span class="chinese" data-reactid="248">时间轴</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/tree-cn/" data-reactid="250"><span data-reactid="251">Tree</span><span class="chinese" data-reactid="252">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="253"><div class="ant-menu-item-group-title" data-reactid="254">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="255"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/alert-cn/" data-reactid="257"><span data-reactid="258">Alert</span><span class="chinese" data-reactid="259">警告提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal-cn/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263">对话框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/message-cn/" data-reactid="265"><span data-reactid="266">Message</span><span class="chinese" data-reactid="267">全局提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/notification-cn/" data-reactid="269"><span data-reactid="270">Notification</span><span class="chinese" data-reactid="271">通知提醒框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="272"><a href="/components/progress-cn/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275">进度条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/popconfirm-cn/" data-reactid="277"><span data-reactid="278">Popconfirm</span><span class="chinese" data-reactid="279">气泡确认框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/spin-cn/" data-reactid="281"><span data-reactid="282">Spin</span><span class="chinese" data-reactid="283">加载中</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="284"><div class="ant-menu-item-group-title" data-reactid="285">Other</div><ul class="ant-menu-item-group-list" data-reactid="286"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/anchor-cn/" data-reactid="288"><span data-reactid="289">Anchor</span><span class="chinese" data-reactid="290">锚点</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291"><a href="/components/locale-provider-cn/" data-reactid="292"><span data-reactid="293">LocaleProvider</span><span class="chinese" data-reactid="294">国际化</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="295"><article class="markdown" data-reactid="296"><h1 data-reactid="297"><!-- react-text: 298 -->在 create-react-app 中使用<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/use-with-create-react-app.zh-CN.md" data-reactid="299"><i class="anticon anticon-edit" data-reactid="300"></i></a></h1><section class="markdown" data-reactid="301"><p data-reactid="302"><a href="https://github.com/facebookincubator/create-react-app" data-reactid="303"><!-- react-text: 304 -->create-react-app<!-- /react-text --></a><!-- react-text: 305 --> 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。<!-- /react-text --></p></section><section class="toc" data-reactid="306"><ul data-reactid="307"><li data-reactid="308"><a class="bisheng-toc-h2" href="#安装和初始化" title="安装和初始化" data-reactid="309"><!-- react-text: 310 -->安装和初始化<!-- /react-text --></a></li><li data-reactid="311"><a class="bisheng-toc-h2" href="#引入-antd" title="引入 antd" data-reactid="312"><!-- react-text: 313 -->引入 antd<!-- /react-text --></a></li><li data-reactid="314"><a class="bisheng-toc-h2" href="#高级配置" title="高级配置" data-reactid="315"><!-- react-text: 316 -->高级配置<!-- /react-text --></a></li><li data-reactid="317"><a class="bisheng-toc-h2" href="#源码和其他脚手架" title="源码和其他脚手架" data-reactid="318"><!-- react-text: 319 -->源码和其他脚手架<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="320"><h2 id="安装和初始化" data-reactid="321"><span data-reactid="322"><!-- react-text: 323 -->安装和初始化<!-- /react-text --></span><a href="#安装和初始化" class="anchor" data-reactid="324">#</a></h2><p data-reactid="325"><!-- react-text: 326 -->我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 <!-- /react-text --><a href="https://github.com/yarnpkg/yarn/" data-reactid="327"><!-- react-text: 328 -->yarn<!-- /react-text --></a><!-- react-text: 329 -->。<!-- /react-text --></p><pre class="language-bash" data-reactid="330"><code data-reactid="331">$ <span class="token function">npm</span> <span class="token function">install</span> -g create-react-app yarn</code></pre><p data-reactid="332"><!-- react-text: 333 -->然后新建一个项目。<!-- /react-text --></p><pre class="language-bash" data-reactid="334"><code data-reactid="335">$ create-react-app antd-demo</code></pre><p data-reactid="336"><!-- react-text: 337 -->工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。<!-- /react-text --></p><p data-reactid="338"><!-- react-text: 339 -->然后我们进入项目并启动。<!-- /react-text --></p><pre class="language-bash" data-reactid="340"><code data-reactid="341">$ <span class="token function">cd</span> antd-demo
$ yarn start</code></pre><p data-reactid="342"><!-- react-text: 343 -->此时浏览器会访问 <!-- /react-text --><a href="http://localhost:3000/" data-reactid="344"><!-- react-text: 345 -->http://localhost:3000/<!-- /react-text --></a><!-- react-text: 346 --> ，看到 <!-- /react-text --><code data-reactid="347"><!-- react-text: 348 -->Welcome to React<!-- /react-text --></code><!-- react-text: 349 --> 的界面就算成功了。<!-- /react-text --></p><h2 id="引入-antd" data-reactid="350"><span data-reactid="351"><!-- react-text: 352 -->引入 antd<!-- /react-text --></span><a href="#引入-antd" class="anchor" data-reactid="353">#</a></h2><p data-reactid="354"><!-- react-text: 355 -->这是 create-react-app 生成的默认目录结构。<!-- /react-text --></p><pre class="language-null" data-reactid="356"><code data-reactid="357">├── README<span class="token punctuation">.</span>md
├── package<span class="token punctuation">.</span>json
├── public
│ ├── favicon<span class="token punctuation">.</span>ico
│ └── index<span class="token punctuation">.</span>html
├── src
│ ├── App<span class="token punctuation">.</span>css
│ ├── App<span class="token punctuation">.</span>js
│ ├── App<span class="token punctuation">.</span>test<span class="token punctuation">.</span>js
│ ├── index<span class="token punctuation">.</span>css
│ ├── index<span class="token punctuation">.</span>js
│ └── logo<span class="token punctuation">.</span>svg
└── yarn<span class="token punctuation">.</span>lock</code></pre><p data-reactid="358"><!-- react-text: 359 -->现在从 yarn 或 npm 安装并引入 antd。<!-- /react-text --></p><pre class="language-bash" data-reactid="360"><code data-reactid="361">$ yarn add antd</code></pre><p data-reactid="362"><!-- react-text: 363 -->修改 <!-- /react-text --><code data-reactid="364"><!-- react-text: 365 -->src/App.js<!-- /react-text --></code><!-- react-text: 366 -->，引入 antd 的按钮组件。<!-- /react-text --></p><pre class="language-jsx" data-reactid="367"><code data-reactid="368"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<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">'./App.css'</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">Component</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">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>App<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>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</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>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span></code></pre><p data-reactid="369"><!-- react-text: 370 -->修改 <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->src/App.css<!-- /react-text --></code><!-- react-text: 373 -->，在文件顶部引入 <!-- /react-text --><code data-reactid="374"><!-- react-text: 375 -->antd/dist/antd.css<!-- /react-text --></code><!-- react-text: 376 -->。<!-- /react-text --></p><pre class="language-css" data-reactid="377"><code data-reactid="378"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">'~antd/dist/antd.css'</span><span class="token punctuation">;</span></span>
<span class="token selector"><span class="token class">.App</span> </span><span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token number">...</span></code></pre><p data-reactid="379"><!-- react-text: 380 -->好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的<!-- /react-text --><a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md" data-reactid="381"><!-- react-text: 382 -->官方文档<!-- /react-text --></a><!-- react-text: 383 -->。<!-- /react-text --></p><h2 id="高级配置" data-reactid="384"><span data-reactid="385"><!-- react-text: 386 -->高级配置<!-- /react-text --></span><a href="#高级配置" class="anchor" data-reactid="387">#</a></h2><p data-reactid="388"><!-- react-text: 389 -->我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。<!-- /react-text --></p><p data-reactid="390"><!-- react-text: 391 -->此时我们可能需要对 create-react-app 的默认配置进行自定义。可以使用 <!-- /react-text --><code data-reactid="392"><!-- react-text: 393 -->eject<!-- /react-text --></code><!-- react-text: 394 --> 命令将所有内建的配置暴露出来。<!-- /react-text --></p><pre class="language-bash" data-reactid="395"><code data-reactid="396">$ yarn run <span class="token function">eject</span></code></pre><h3 id="使用-babel-plugin-import" data-reactid="397"><span data-reactid="398"><!-- react-text: 399 -->使用 babel-plugin-import<!-- /react-text --></span><a href="#使用-babel-plugin-import" class="anchor" data-reactid="400">#</a></h3><p data-reactid="401"><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="402"><!-- react-text: 403 -->babel-plugin-import<!-- /react-text --></a><!-- react-text: 404 --> 是一个用于按需加载组件代码和样式的 babel 插件（<!-- /react-text --><a href="/docs/react/getting-started-cn#按需加载" data-reactid="405">原理</a><!-- react-text: 406 -->），现在我们尝试安装它并修改 <!-- /react-text --><code data-reactid="407"><!-- react-text: 408 -->config/webpack.config.dev.js<!-- /react-text --></code><!-- react-text: 409 --> 文件。<!-- /react-text --></p><pre class="language-bash" data-reactid="410"><code data-reactid="411">$ yarn add babel-plugin-import --dev</code></pre><pre class="language-diff" data-reactid="412"><code data-reactid="413">// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
<span class="token inserted">+ plugins: [</span>
<span class="token inserted">+ ['import', { libraryName: 'antd', style: 'css' }],</span>
<span class="token inserted">+ ],</span>
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true
}
},</code></pre><blockquote data-reactid="414"><p data-reactid="415"><!-- react-text: 416 -->注意，由于 create-react-app eject 之后的配置中没有 <!-- /react-text --><code data-reactid="417"><!-- react-text: 418 -->.babelrc<!-- /react-text --></code><!-- react-text: 419 --> 文件，所以需要把配置放到 <!-- /react-text --><code data-reactid="420"><!-- react-text: 421 -->webpack.config.js<!-- /react-text --></code><!-- react-text: 422 --> 或 <!-- /react-text --><code data-reactid="423"><!-- react-text: 424 -->package.json<!-- /react-text --></code><!-- react-text: 425 --> 的 <!-- /react-text --><code data-reactid="426"><!-- react-text: 427 -->babel<!-- /react-text --></code><!-- react-text: 428 --> 属性中。<!-- /react-text --></p></blockquote><p data-reactid="429"><!-- react-text: 430 -->然后移除前面在 <!-- /react-text --><code data-reactid="431"><!-- react-text: 432 -->src/App.css<!-- /react-text --></code><!-- react-text: 433 --> 里全量添加的 <!-- /react-text --><code data-reactid="434"><!-- react-text: 435 -->@import &#x27;~antd/dist/antd.css&#x27;;<!-- /react-text --></code><!-- react-text: 436 --> 样式代码，并且按下面的格式引入模块。<!-- /react-text --></p><pre class="language-diff" data-reactid="437"><code data-reactid="438"> // scr/App.js
import React, { Component } from 'react';
<span class="token deleted">- import Button from 'antd/lib/button';</span>
<span class="token inserted">+ import { Button } from 'antd';</span>
import './App.css';
class App extends Component {
render() {
return (
&lt;div className="App">
&lt;Button type="primary">Button&lt;/Button>
&lt;/div>
);
}
}
export default App;</code></pre><p data-reactid="439"><!-- react-text: 440 -->最后重启 <!-- /react-text --><code data-reactid="441"><!-- react-text: 442 -->yarn start<!-- /react-text --></code><!-- react-text: 443 --> 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的<!-- /react-text --><a href="https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png" data-reactid="444"><!-- react-text: 445 -->警告信息<!-- /react-text --></a><!-- react-text: 446 -->。关于按需加载的原理和其他方式可以阅读<!-- /react-text --><a href="/docs/react/getting-started-cn#Import-on-Demand" data-reactid="447">这里</a><!-- react-text: 448 -->.<!-- /react-text --></p><h3 id="自定义主题" data-reactid="449"><span data-reactid="450"><!-- react-text: 451 -->自定义主题<!-- /react-text --></span><a href="#自定义主题" class="anchor" data-reactid="452">#</a></h3><p data-reactid="453"><!-- react-text: 454 -->按照 <!-- /react-text --><a href="/docs/react/customize-theme-cn" data-reactid="455">配置主题</a><!-- react-text: 456 --> 的要求，自定义主题需要用到 less 变量覆盖功能，因此首先我们需要引入 <!-- /react-text --><a href="https://github.com/webpack/less-loader" data-reactid="457"><!-- react-text: 458 -->less-loader<!-- /react-text --></a><!-- react-text: 459 --> 来加载 less 样式，同时修改 <!-- /react-text --><code data-reactid="460"><!-- react-text: 461 -->config/webpack.config.dev.js<!-- /react-text --></code><!-- react-text: 462 --> 文件。<!-- /react-text --></p><pre class="language-bash" data-reactid="463"><code data-reactid="464">$ yarn add <span class="token function">less</span> less-loader --dev</code></pre><pre class="language-diff" data-reactid="465"><code data-reactid="466"> {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
<span class="token inserted">+ /\.less$/,</span>
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
...
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
options: {
plugins: [
<span class="token deleted">- ['import', [{ libraryName: 'antd', style: 'css' }]],</span>
<span class="token inserted">+ ['import', [{ libraryName: 'antd', style: true }]], // import less</span>
],
},
...
<span class="token inserted">+ // Parse less files and modify variables</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ test: /\.less$/,</span>
<span class="token inserted">+ use: [</span>
<span class="token inserted">+ require.resolve('style-loader'),</span>
<span class="token inserted">+ require.resolve('css-loader'),</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ loader: require.resolve('postcss-loader'),</span>
<span class="token inserted">+ options: {</span>
<span class="token inserted">+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options</span>
<span class="token inserted">+ plugins: () => [</span>
<span class="token inserted">+ require('postcss-flexbugs-fixes'),</span>
<span class="token inserted">+ autoprefixer({</span>
<span class="token inserted">+ browsers: [</span>
<span class="token inserted">+ '>1%',</span>
<span class="token inserted">+ 'last 4 versions',</span>
<span class="token inserted">+ 'Firefox ESR',</span>
<span class="token inserted">+ 'not ie &lt; 9', // React doesn't support IE8 anyway</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ flexbox: 'no-2009',</span>
<span class="token inserted">+ }),</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ loader: require.resolve('less-loader'),</span>
<span class="token inserted">+ options: {</span>
<span class="token inserted">+ modifyVars: { "@primary-color": "#1DA57A" },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ },</span>
],</code></pre><p data-reactid="467"><!-- react-text: 468 -->这里利用了 <!-- /react-text --><a href="https://github.com/webpack/less-loader#less-options" data-reactid="469"><!-- react-text: 470 -->less-loader<!-- /react-text --></a><!-- react-text: 471 --> 的 <!-- /react-text --><code data-reactid="472"><!-- react-text: 473 -->modifyVars<!-- /react-text --></code><!-- react-text: 474 --> 来进行主题配置，
变量和其他配置方式可以参考 <!-- /react-text --><a href="/docs/react/customize-theme-cn" data-reactid="475">配置主题</a><!-- react-text: 476 --> 文档。<!-- /react-text --></p><p data-reactid="477"><!-- react-text: 478 -->修改后重启 <!-- /react-text --><code data-reactid="479"><!-- react-text: 480 -->yarn start<!-- /react-text --></code><!-- react-text: 481 -->，如果看到一个绿色的按钮就说明配置成功了。<!-- /react-text --></p><blockquote data-reactid="482"><p data-reactid="483"><!-- react-text: 484 -->注意，上述示例只修改了 <!-- /react-text --><code data-reactid="485"><!-- react-text: 486 -->webpack.config.dev.js<!-- /react-text --></code><!-- react-text: 487 -->，如果需要在生产环境生效，你需要同步修改 <!-- /react-text --><code data-reactid="488"><!-- react-text: 489 -->webpack.config.prod.js<!-- /react-text --></code><!-- react-text: 490 -->。<!-- /react-text --></p></blockquote><h2 id="源码和其他脚手架" data-reactid="491"><span data-reactid="492"><!-- react-text: 493 -->源码和其他脚手架<!-- /react-text --></span><a href="#源码和其他脚手架" class="anchor" data-reactid="494">#</a></h2><p data-reactid="495"><!-- react-text: 496 -->以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd，更多 webpack 配置可参考 <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" data-reactid="497"><!-- react-text: 498 -->atool-build<!-- /react-text --></a><!-- react-text: 499 -->。（例如加入 <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90" data-reactid="500"><!-- react-text: 501 -->moment noParse<!-- /react-text --></a><!-- react-text: 502 --> 避免加载所有语言文件）<!-- /react-text --></p><p data-reactid="503"><!-- react-text: 504 -->React 生态圈中还有很多优秀的脚手架，使用它们并引入 antd 时，你可能会遇到一些问题，下面是一些著名脚手架使用 antd 的范例，包括本文的 create-react-app。<!-- /react-text --></p><ul data-reactid="505"><li data-reactid="506"><p data-reactid="507"><a href="https://github.com/ant-design/react-boilerplate" data-reactid="508"><!-- react-text: 509 -->react-boilerplate/react-boilerplate<!-- /react-text --></a></p></li><li data-reactid="510"><p data-reactid="511"><a href="https://github.com/ant-design/react-starter-kit" data-reactid="512"><!-- react-text: 513 -->kriasoft/react-starter-kit<!-- /react-text --></a></p></li><li data-reactid="514"><p data-reactid="515"><a href="https://github.com/ant-design/create-react-app-antd" data-reactid="516"><!-- react-text: 517 -->create-react-app-antd<!-- /react-text --></a></p></li></ul></section><section class="markdown api-container" data-reactid="518"></section></article></div></div><div class="ant-row" data-reactid="519"><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="520"><section class="prev-next-nav" data-reactid="521"><a class="prev-page" href="/docs/react/practical-projects-cn" data-reactid="522">项目实战</a><a class="next-page" href="/docs/react/customize-theme-cn" data-reactid="523">定制主题</a></section></div></div></div><footer id="footer" data-reactid="524"><ul data-reactid="525"><li data-reactid="526"><h2 data-reactid="527"><i class="anticon anticon-github" data-reactid="528"></i><!-- react-text: 529 --> GitHub<!-- /react-text --></h2><div data-reactid="530"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="531"><span data-reactid="532">源码仓库</span></a></div><div data-reactid="533"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="534"><span data-reactid="535">定制主题</span></a></div><div data-reactid="536"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="537"><span data-reactid="538">Awesome Ant Design</span></a></div></li><li data-reactid="539"><h2 data-reactid="540"><i class="anticon anticon-link" data-reactid="541"></i><!-- react-text: 542 --> <!-- /react-text --><span data-reactid="543">相关站点</span></h2><div data-reactid="544"><a href="https://design.alipay.com/" data-reactid="545"><span data-reactid="546">蚂蚁金服设计平台</span></a></div><div data-reactid="547"><a href="http://mobile.ant.design" data-reactid="548">Ant Design Mobile</a><span data-reactid="549"> - </span><span data-reactid="550">移动版</span></div><div data-reactid="551"><a href="http://scaffold.ant.design" data-reactid="552">Scaffolds</a><span data-reactid="553"> - </span><span data-reactid="554">脚手架市场</span></div><div data-reactid="555"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="556">dva</a><!-- react-text: 557 --> - <!-- /react-text --><span data-reactid="558">应用框架</span></div><div data-reactid="559"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="560">dva-cli</a><!-- react-text: 561 --> -<!-- /react-text --><span data-reactid="562">开发工具</span></div><div data-reactid="563"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="564">Egg</a><span data-reactid="565"> - </span><span data-reactid="566">企业级 Node 开发框架</span></div><div data-reactid="567"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="568">AntV</a><span data-reactid="569"> - </span><span data-reactid="570">数据可视化</span></div><div data-reactid="571"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="572">Ant Motion</a><span data-reactid="573"> - </span><span data-reactid="574">设计动效</span></div><div data-reactid="575"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="576">AntD Library</a><span data-reactid="577"> - </span><span data-reactid="578">Axure 部件库</span></div><div data-reactid="579"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="580">Ant UX</a><span data-reactid="581"> - </span><span data-reactid="582">页面逻辑素材</span></div></li><li data-reactid="583"><h2 data-reactid="584"><i class="anticon anticon-customer-service" data-reactid="585"></i><!-- react-text: 586 --> <!-- /react-text --><span data-reactid="587">社区</span></h2><div data-reactid="588"><a href="/changelog" data-reactid="589"><span data-reactid="590">更新记录</span></a></div><div data-reactid="591"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="592"><span data-reactid="593">常见问题</span></a></div><div data-reactid="594"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="595"><span data-reactid="596">在线讨论 (中文)</span></a></div><div data-reactid="597"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="598"><span data-reactid="599">在线讨论 (English)</span></a></div><div data-reactid="600"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="601"><span data-reactid="602">报告 Bug</span></a></div><div data-reactid="603"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="604"><span data-reactid="605">讨论列表</span></a></div><div data-reactid="606"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="607"><span data-reactid="608">StackOverflow</span></a></div><div data-reactid="609"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="610"><span data-reactid="611">SegmentFault</span></a></div></li><li data-reactid="612"><h2 data-reactid="613"><!-- react-text: 614 -->Copyright © <!-- /react-text --><!-- react-text: 615 -->2017<!-- /react-text --></h2><div data-reactid="616"><span data-reactid="617">蚂蚁金服体验技术部出品 @ AFUX</span></div><div data-reactid="618"><!-- react-text: 619 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="620">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