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

210 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="849014727"><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" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/getting-started-cn" data-reactid="52">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" 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/practical-projects.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"><a href="https://github.com/dvajs/dva" data-reactid="302"><!-- react-text: 303 -->dva<!-- /react-text --></a><!-- react-text: 304 --> 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。<!-- /react-text --></p><p data-reactid="305"><!-- react-text: 306 -->本文会引导你使用 dva 和 antd 从 0 开始创建一个简单应用。<!-- /react-text --></p><p data-reactid="307"><!-- react-text: 308 -->会包含以下内容：<!-- /react-text --></p></section><section class="toc" data-reactid="309"><ul data-reactid="310"><li data-reactid="311"><a class="bisheng-toc-h2" href="#安装-dva-cli" data-reactid="312"><!-- react-text: 313 -->安装 dva-cli<!-- /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="#使用-antd" data-reactid="318"><!-- react-text: 319 -->使用 antd<!-- /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="#编写-UI-Component" data-reactid="324"><!-- react-text: 325 -->编写 UI Component<!-- /react-text --></a></li><li data-reactid="326"><a class="bisheng-toc-h2" href="#定义-Model" data-reactid="327"><!-- react-text: 328 -->定义 Model<!-- /react-text --></a></li><li data-reactid="329"><a class="bisheng-toc-h2" href="#connect-起来" data-reactid="330"><!-- react-text: 331 -->connect 起来<!-- /react-text --></a></li><li data-reactid="332"><a class="bisheng-toc-h2" href="#构建应用" data-reactid="333"><!-- react-text: 334 -->构建应用<!-- /react-text --></a></li><li data-reactid="335"><a class="bisheng-toc-h2" href="#下一步" data-reactid="336"><!-- react-text: 337 -->下一步<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="338"><h2 id="安装-dva-cli" data-reactid="339"><span data-reactid="340"><!-- react-text: 341 -->安装 dva-cli<!-- /react-text --></span><a href="#安装-dva-cli" class="anchor" data-reactid="342">#</a></h2><p data-reactid="343"><!-- react-text: 344 -->通过 npm 安装 dva-cli 并确保版本是 <!-- /react-text --><code data-reactid="345"><!-- react-text: 346 -->0.7.0<!-- /react-text --></code><!-- react-text: 347 --> 或以上。<!-- /react-text --></p><pre class="language-bash" data-reactid="348"><code data-reactid="349">$ <span class="token function">npm</span> <span class="token function">install</span> dva-cli -g
$ dva -v
0.7.0</code></pre><h2 id="创建新应用" data-reactid="350"><span data-reactid="351"><!-- react-text: 352 -->创建新应用<!-- /react-text --></span><a href="#创建新应用" class="anchor" data-reactid="353">#</a></h2><p data-reactid="354"><!-- react-text: 355 -->安装完 dva-cli 之后，就可以在 terminal 里访问到 <!-- /react-text --><code data-reactid="356"><!-- react-text: 357 -->dva<!-- /react-text --></code><!-- react-text: 358 --> 命令。现在，你可以通过 <!-- /react-text --><code data-reactid="359"><!-- react-text: 360 -->dva new<!-- /react-text --></code><!-- react-text: 361 --> 创建新应用。<!-- /react-text --></p><pre class="language-bash" data-reactid="362"><code data-reactid="363">$ dva new dva-quickstart</code></pre><p data-reactid="364"><!-- react-text: 365 -->这会创建 <!-- /react-text --><code data-reactid="366"><!-- react-text: 367 -->dva-quickstart<!-- /react-text --></code><!-- react-text: 368 --> 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。<!-- /react-text --></p><p data-reactid="369"><!-- react-text: 370 -->然后我们 <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->cd<!-- /react-text --></code><!-- react-text: 373 --> 进入 <!-- /react-text --><code data-reactid="374"><!-- react-text: 375 -->dva-quickstart<!-- /react-text --></code><!-- react-text: 376 --> 目录，并启动开发服务器：<!-- /react-text --></p><pre class="language-bash" data-reactid="377"><code data-reactid="378">$ <span class="token function">cd</span> dva-quickstart
$ <span class="token function">npm</span> start</code></pre><p data-reactid="379"><!-- react-text: 380 -->几秒钟后，你会看到以下输出：<!-- /react-text --></p><pre class="language-bash" data-reactid="381"><code data-reactid="382">Compiled successfully<span class="token operator">!</span>
The app is running at:
http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use <span class="token function">npm</span> run build.</code></pre><p data-reactid="383"><!-- react-text: 384 -->在浏览器里打开 <!-- /react-text --><a href="http://localhost:8000" data-reactid="385"><!-- react-text: 386 -->http://localhost:8000<!-- /react-text --></a><!-- react-text: 387 --> ，你会看到 dva 的欢迎界面。<!-- /react-text --></p><h2 id="使用-antd" data-reactid="388"><span data-reactid="389"><!-- react-text: 390 -->使用 antd<!-- /react-text --></span><a href="#使用-antd" class="anchor" data-reactid="391">#</a></h2><p data-reactid="392"><!-- react-text: 393 -->通过 npm 安装 <!-- /react-text --><code data-reactid="394"><!-- react-text: 395 -->antd<!-- /react-text --></code><!-- react-text: 396 --> 和 <!-- /react-text --><code data-reactid="397"><!-- react-text: 398 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 399 --> 。<!-- /react-text --><code data-reactid="400"><!-- react-text: 401 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 402 --> 是用来按需加载 antd 的脚本和样式的，详见 <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="403"><!-- react-text: 404 -->repo<!-- /react-text --></a><!-- react-text: 405 --> 。<!-- /react-text --></p><pre class="language-bash" data-reactid="406"><code data-reactid="407">$ <span class="token function">npm</span> <span class="token function">install</span> antd babel-plugin-import --save</code></pre><p data-reactid="408"><!-- react-text: 409 -->编辑 <!-- /react-text --><code data-reactid="410"><!-- react-text: 411 -->.roadhogrc<!-- /react-text --></code><!-- react-text: 412 -->，使 <!-- /react-text --><code data-reactid="413"><!-- react-text: 414 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 415 --> 插件生效。<!-- /react-text --></p><pre class="language-diff" data-reactid="416"><code data-reactid="417"> "extraBabelPlugins": [
<span class="token deleted">- "transform-runtime"</span>
<span class="token inserted">+ "transform-runtime",</span>
<span class="token inserted">+ ["import", { "libraryName": "antd", "style": "css" }]</span>
],</code></pre><blockquote data-reactid="418"><p data-reactid="419"><!-- react-text: 420 -->注：dva-cli 基于 roadhog 实现 build 和 server，更多 <!-- /react-text --><code data-reactid="421"><!-- react-text: 422 -->.roadhogrc<!-- /react-text --></code><!-- react-text: 423 --> 的配置详见 <!-- /react-text --><a href="https://github.com/sorrycc/roadhog#配置" data-reactid="424"><!-- react-text: 425 -->roadhog#配置<!-- /react-text --></a></p></blockquote><h2 id="定义路由" data-reactid="426"><span data-reactid="427"><!-- react-text: 428 -->定义路由<!-- /react-text --></span><a href="#定义路由" class="anchor" data-reactid="429">#</a></h2><p data-reactid="430"><!-- react-text: 431 -->我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。<!-- /react-text --></p><p data-reactid="432"><!-- react-text: 433 -->新建 route component <!-- /react-text --><code data-reactid="434"><!-- react-text: 435 -->routes/Products.js<!-- /react-text --></code><!-- react-text: 436 -->，内容如下：<!-- /react-text --></p><pre class="language-javascript" data-reactid="437"><code data-reactid="438"><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">const</span> Products <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>h2<span class="token operator">></span>List <span class="token keyword">of</span> Products<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Products<span class="token punctuation">;</span></code></pre><p data-reactid="439"><!-- react-text: 440 -->添加路由信息到路由表，编辑 <!-- /react-text --><code data-reactid="441"><!-- react-text: 442 -->router.js<!-- /react-text --></code><!-- react-text: 443 --> :<!-- /react-text --></p><pre class="language-diff" data-reactid="444"><code data-reactid="445"><span class="token inserted">+ import Products from './routes/Products';</span>
...
<span class="token inserted">+ &lt;Route path="/products" component={Products} /></span></code></pre><p data-reactid="446"><!-- react-text: 447 -->然后在浏览器里打开 <!-- /react-text --><a href="http://localhost:8000/#/products" data-reactid="448"><!-- react-text: 449 -->http://localhost:8000/#/products<!-- /react-text --></a><!-- react-text: 450 --> ，你应该能看到前面定义的 <!-- /react-text --><code data-reactid="451"><!-- react-text: 452 -->&lt;h2&gt;<!-- /react-text --></code><!-- react-text: 453 --> 标签。<!-- /react-text --></p><h2 id="编写-UI-Component" data-reactid="454"><span data-reactid="455"><!-- react-text: 456 -->编写 UI Component<!-- /react-text --></span><a href="#编写-UI-Component" class="anchor" data-reactid="457">#</a></h2><p data-reactid="458"><!-- react-text: 459 -->随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。<!-- /react-text --></p><p data-reactid="460"><!-- react-text: 461 -->我们来编写一个 <!-- /react-text --><code data-reactid="462"><!-- react-text: 463 -->ProductList<!-- /react-text --></code><!-- react-text: 464 --> component，这样就能在不同的地方显示产品列表了。<!-- /react-text --></p><p data-reactid="465"><!-- react-text: 466 -->新建 <!-- /react-text --><code data-reactid="467"><!-- react-text: 468 -->components/ProductList.js<!-- /react-text --></code><!-- react-text: 469 --> 文件：<!-- /react-text --></p><pre class="language-javascript" data-reactid="470"><code data-reactid="471"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PropTypes <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> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Popconfirm<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>
<span class="token keyword">const</span> ProductList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> onDelete<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Actions'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>Popconfirm title<span class="token operator">=</span><span class="token string">"Delete?"</span> onConfirm<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">onDelete</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Button<span class="token operator">></span>Delete<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Popconfirm<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</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">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>Table
dataSource<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span>
columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
ProductList<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
onDelete<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
products<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>array<span class="token punctuation">.</span>isRequired<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> ProductList<span class="token punctuation">;</span></code></pre><h2 id="定义-Model" data-reactid="472"><span data-reactid="473"><!-- react-text: 474 -->定义 Model<!-- /react-text --></span><a href="#定义-Model" class="anchor" data-reactid="475">#</a></h2><p data-reactid="476"><!-- react-text: 477 -->完成 UI 后，现在开始处理数据和逻辑。<!-- /react-text --></p><p data-reactid="478"><!-- react-text: 479 -->dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。<!-- /react-text --></p><p data-reactid="480"><!-- react-text: 481 -->新建 model <!-- /react-text --><code data-reactid="482"><!-- react-text: 483 -->models/products.js<!-- /react-text --></code><!-- react-text: 484 --> ：<!-- /react-text --></p><pre class="language-javascript" data-reactid="485"><code data-reactid="486"><span class="token keyword">import</span> dva <span class="token keyword">from</span> <span class="token string">'dva'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
namespace<span class="token punctuation">:</span> <span class="token string">'products'</span><span class="token punctuation">,</span>
state<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
reducers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">'delete'</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> payload<span class="token punctuation">:</span> id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><p data-reactid="487"><!-- react-text: 488 -->这个 model 里：<!-- /react-text --></p><ul data-reactid="489"><li data-reactid="490"><p data-reactid="491"><code data-reactid="492"><!-- react-text: 493 -->namespace<!-- /react-text --></code><!-- react-text: 494 --> 表示在全局 state 上的 key<!-- /react-text --></p></li><li data-reactid="495"><p data-reactid="496"><code data-reactid="497"><!-- react-text: 498 -->state<!-- /react-text --></code><!-- react-text: 499 --> 是初始值，在这里是空数组<!-- /react-text --></p></li><li data-reactid="500"><p data-reactid="501"><code data-reactid="502"><!-- react-text: 503 -->reducers<!-- /react-text --></code><!-- react-text: 504 --> 等同于 redux 里的 reducer，接收 action，同步更新 state<!-- /react-text --></p></li></ul><p data-reactid="505"><!-- react-text: 506 -->然后别忘记在 <!-- /react-text --><code data-reactid="507"><!-- react-text: 508 -->index.js<!-- /react-text --></code><!-- react-text: 509 --> 里载入他：<!-- /react-text --></p><pre class="language-diff" data-reactid="510"><code data-reactid="511">// 3. Model
<span class="token inserted">+ app.model(require('./models/products'));</span></code></pre><h2 id="connect-起来" data-reactid="512"><span data-reactid="513"><!-- react-text: 514 -->connect 起来<!-- /react-text --></span><a href="#connect-起来" class="anchor" data-reactid="515">#</a></h2><p data-reactid="516"><!-- react-text: 517 -->到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?<!-- /react-text --></p><p data-reactid="518"><!-- react-text: 519 -->dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。<!-- /react-text --></p><p data-reactid="520"><!-- react-text: 521 -->编辑 <!-- /react-text --><code data-reactid="522"><!-- react-text: 523 -->routes/Products.js<!-- /react-text --></code><!-- react-text: 524 -->，替换为以下内容：<!-- /react-text --></p><pre class="language-javascript" data-reactid="525"><code data-reactid="526"><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> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'dva'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ProductList <span class="token keyword">from</span> <span class="token string">'../components/ProductList'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Products <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">function</span> <span class="token function">handleDelete</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'products/delete'</span><span class="token punctuation">,</span>
payload<span class="token punctuation">:</span> id<span class="token punctuation">,</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">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>h2<span class="token operator">></span>List <span class="token keyword">of</span> Products<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span>
<span class="token operator">&lt;</span>ProductList onDelete<span class="token operator">=</span><span class="token punctuation">{</span>handleDelete<span class="token punctuation">}</span> products<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// export default Products;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
products<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Products<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p data-reactid="527"><!-- react-text: 528 -->最后，我们还需要一些初始数据让这个应用 run 起来。编辑 <!-- /react-text --><code data-reactid="529"><!-- react-text: 530 -->index.js<!-- /react-text --></code><!-- react-text: 531 -->：<!-- /react-text --></p><pre class="language-diff" data-reactid="532"><code data-reactid="533"><span class="token deleted">- const app = dva();</span>
<span class="token inserted">+ const app = dva({</span>
<span class="token inserted">+ initialState: {</span>
<span class="token inserted">+ products: [</span>
<span class="token inserted">+ { name: 'dva', id: 1 },</span>
<span class="token inserted">+ { name: 'antd', id: 2 },</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ });</span></code></pre><p data-reactid="534"><!-- react-text: 535 -->刷新浏览器，应该能看到以下效果：<!-- /react-text --></p><p style="text-align:center;" data-reactid="536"><img src="https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif" data-reactid="537"/></p><h2 id="构建应用" data-reactid="538"><span data-reactid="539"><!-- react-text: 540 -->构建应用<!-- /react-text --></span><a href="#构建应用" class="anchor" data-reactid="541">#</a></h2><p data-reactid="542"><!-- react-text: 543 -->完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：<!-- /react-text --></p><pre class="language-bash" data-reactid="544"><code data-reactid="545">$ <span class="token function">npm</span> run build</code></pre><p data-reactid="546"><!-- react-text: 547 -->几秒后，输出应该如下：<!-- /react-text --></p><pre class="language-bash" data-reactid="548"><code data-reactid="549"><span class="token operator">></span> @ build /private/tmp/myapp
<span class="token operator">></span> roadhog build
Creating an optimized production build<span class="token punctuation">..</span>.
Compiled successfully.
File sizes after gzip:
82.98 KB dist/index.js
270 B dist/index.css</code></pre><p data-reactid="550"><code data-reactid="551"><!-- react-text: 552 -->build<!-- /react-text --></code><!-- react-text: 553 --> 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 <!-- /react-text --><code data-reactid="554"><!-- react-text: 555 -->dist/<!-- /react-text --></code><!-- react-text: 556 --> 目录下找到这些文件。<!-- /react-text --></p><h2 id="下一步" data-reactid="557"><span data-reactid="558"><!-- react-text: 559 -->下一步<!-- /react-text --></span><a href="#下一步" class="anchor" data-reactid="560">#</a></h2><p data-reactid="561"><!-- react-text: 562 -->我们已经完成了一个简单应用，你可能还有很多疑问，比如：<!-- /react-text --></p><ul data-reactid="563"><li data-reactid="564"><p data-reactid="565"><!-- react-text: 566 -->如何处理异步请求<!-- /react-text --></p></li><li data-reactid="567"><p data-reactid="568"><!-- react-text: 569 -->如何优雅地加载初始数据<!-- /react-text --></p></li><li data-reactid="570"><p data-reactid="571"><!-- react-text: 572 -->如何统一处理出错，以及特定操作的出错<!-- /react-text --></p></li><li data-reactid="573"><p data-reactid="574"><!-- react-text: 575 -->如何动态加载路由和 Model，以加速页面载入速度<!-- /react-text --></p></li><li data-reactid="576"><p data-reactid="577"><!-- react-text: 578 -->如何实现 hmr<!-- /react-text --></p></li><li data-reactid="579"><p data-reactid="580"><!-- react-text: 581 -->如何 mock 数据<!-- /react-text --></p></li><li data-reactid="582"><p data-reactid="583"><!-- react-text: 584 -->等等<!-- /react-text --></p></li></ul><p data-reactid="585"><!-- react-text: 586 -->你可以：<!-- /react-text --></p><ul data-reactid="587"><li data-reactid="588"><p data-reactid="589"><!-- react-text: 590 -->访问 <!-- /react-text --><a href="https://github.com/dvajs/dva" data-reactid="591"><!-- react-text: 592 -->dva 官网<!-- /react-text --></a></p></li><li data-reactid="593"><p data-reactid="594"><!-- react-text: 595 -->理解 dva 的 <!-- /react-text --><a href="https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md" data-reactid="596"><!-- react-text: 597 -->8 个概念<!-- /react-text --></a><!-- react-text: 598 --> ，以及他们是如何串起来的<!-- /react-text --></p></li><li data-reactid="599"><p data-reactid="600"><!-- react-text: 601 -->掌握 dva 的<!-- /react-text --><a href="https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md" data-reactid="602"><!-- react-text: 603 -->所有 API<!-- /react-text --></a></p></li><li data-reactid="604"><p data-reactid="605"><!-- react-text: 606 -->查看 <!-- /react-text --><a href="https://github.com/dvajs/dva-knowledgemap" data-reactid="607"><!-- react-text: 608 -->dva 知识地图<!-- /react-text --></a><!-- react-text: 609 --> ，包含 ES6, React, dva 等所有基础知识<!-- /react-text --></p></li><li data-reactid="610"><p data-reactid="611"><!-- react-text: 612 -->查看 <!-- /react-text --><a href="https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq" data-reactid="613"><!-- react-text: 614 -->更多 FAQ<!-- /react-text --></a><!-- react-text: 615 -->，看看别人通常会遇到什么问题<!-- /react-text --></p></li><li data-reactid="616"><p data-reactid="617"><!-- react-text: 618 -->如果你基于 dva-cli 创建项目，最好了解他的 <!-- /react-text --><a href="https://github.com/sorrycc/roadhog#配置" data-reactid="619"><!-- react-text: 620 -->配置方式<!-- /react-text --></a></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="621"><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="622"><section class="prev-next-nav" data-reactid="623"><a class="prev-page" href="/docs/react/getting-started-cn" data-reactid="624">快速上手</a><a class="next-page" href="/docs/react/use-with-create-react-app-cn" data-reactid="625">在 create-react-app 中使用</a></section></div></div></div><footer id="footer" data-reactid="626"><ul data-reactid="627"><li data-reactid="628"><h2 data-reactid="629"><i class="anticon anticon-github" data-reactid="630"></i><!-- react-text: 631 --> GitHub<!-- /react-text --></h2><div data-reactid="632"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="633"><span data-reactid="634">仓库</span></a></div><div data-reactid="635"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="636"><span data-reactid="637">定制主题</span></a></div><div data-reactid="638"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="639"><span data-reactid="640">Awesome Ant Design</span></a></div></li><li data-reactid="641"><h2 data-reactid="642"><i class="anticon anticon-link" data-reactid="643"></i><!-- react-text: 644 --> <!-- /react-text --><span data-reactid="645">相关站点</span></h2><div data-reactid="646"><a href="http://mobile.ant.design" data-reactid="647">Ant Design Mobile</a><span data-reactid="648"> - </span><span data-reactid="649">移动版</span></div><div data-reactid="650"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="651">dva</a><!-- react-text: 652 --> - <!-- /react-text --><span data-reactid="653">应用框架</span></div><div data-reactid="654"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="655">dva-cli</a><!-- react-text: 656 --> -<!-- /react-text --><span data-reactid="657">开发工具</span></div><div data-reactid="658"><a href="https://antv.alipay.com/" data-reactid="659">AntV</a><span data-reactid="660"> - </span><span data-reactid="661">数据可视化</span></div><div data-reactid="662"><a href="http://motion.ant.design" data-reactid="663">Ant Motion</a><span data-reactid="664"> - </span><span data-reactid="665">设计动效</span></div><div data-reactid="666"><a href="http://library.ant.design/" data-reactid="667">AntD Library</a><span data-reactid="668"> - </span><span data-reactid="669">Axure 部件库</span></div><div data-reactid="670"><a href="http://ux.ant.design" data-reactid="671">Ant UX</a><span data-reactid="672"> - </span><span data-reactid="673">页面逻辑素材</span></div></li><li data-reactid="674"><h2 data-reactid="675"><i class="anticon anticon-customer-service" data-reactid="676"></i><!-- react-text: 677 --> <!-- /react-text --><span data-reactid="678">社区</span></h2><div data-reactid="679"><a rel="noopener noreferrer" href="/changelog" data-reactid="680"><span data-reactid="681">更新记录</span></a></div><div data-reactid="682"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="683"><span data-reactid="684">常见问题</span></a></div><div data-reactid="685"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="686"><span data-reactid="687">在线讨论</span></a></div><div data-reactid="688"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="689"><span data-reactid="690">报告 Bug</span></a></div><div data-reactid="691"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="692"><span data-reactid="693">StackOverflow</span></a></div><div data-reactid="694"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="695"><span data-reactid="696">SegmentFault</span></a></div></li><li data-reactid="697"><h2 data-reactid="698"><!-- react-text: 699 -->Copyright © <!-- /react-text --><!-- react-text: 700 -->2017<!-- /react-text --></h2><div data-reactid="701"><span data-reactid="702">蚂蚁金服体验技术部出品</span></div><div data-reactid="703"><!-- react-text: 704 -->Built with <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="705">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