home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-22 11:16:35 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
ede8fae5a147a05008cc5065bbd0e3fa8128e076
ant-design/docs/install.html
T
afc163 ede8fae5a1 Updates
2015-11-30 15:30:10 +08:00

639 lines
19 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="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="一个 UI 设计语言"/>
<title>
安装 - Ant Design
</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="../dist/demo.css">
<link rel="stylesheet" href="../static/style.css">
<link rel="stylesheet" href="../static/tomorrow.css">
<!--[if IE 8]>
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
<![endif]-->
<script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js"></script>
<script>
(function() {
window.ANT_COMPONENTS = [];
window.InstantClickChangeFns = [];
ANT_COMPONENTS.push({
title: 'Pagination',
desc: '分页'
});
ANT_COMPONENTS.push({
title: 'Affix',
desc: '固钉'
});
ANT_COMPONENTS.push({
title: 'Badge',
desc: '徽标数'
});
ANT_COMPONENTS.push({
title: 'Breadcrumb',
desc: '面包屑'
});
ANT_COMPONENTS.push({
title: 'Button',
desc: '按钮'
});
ANT_COMPONENTS.push({
title: 'Calendar',
desc: '日历'
});
ANT_COMPONENTS.push({
title: 'Carousel',
desc: '走马灯'
});
ANT_COMPONENTS.push({
title: 'Checkbox',
desc: '多选框'
});
ANT_COMPONENTS.push({
title: 'Collapse',
desc: '折叠面板'
});
ANT_COMPONENTS.push({
title: 'Datepicker',
desc: '日期选择框'
});
ANT_COMPONENTS.push({
title: 'Dropdown',
desc: '下拉菜单'
});
ANT_COMPONENTS.push({
title: 'Form',
desc: '表单'
});
ANT_COMPONENTS.push({
title: 'Icon',
desc: '图标'
});
ANT_COMPONENTS.push({
title: 'InputNumber',
desc: '数字输入框'
});
ANT_COMPONENTS.push({
title: 'Layout',
desc: '布局'
});
ANT_COMPONENTS.push({
title: 'Menu',
desc: '导航菜单'
});
ANT_COMPONENTS.push({
title: 'Message',
desc: '全局提示'
});
ANT_COMPONENTS.push({
title: 'Modal',
desc: '对话框'
});
ANT_COMPONENTS.push({
title: 'Notification',
desc: '通知提醒框'
});
ANT_COMPONENTS.push({
title: 'Alert',
desc: '警告提示'
});
ANT_COMPONENTS.push({
title: 'Popconfirm',
desc: '气泡确认框'
});
ANT_COMPONENTS.push({
title: 'Popover',
desc: '气泡卡片'
});
ANT_COMPONENTS.push({
title: 'Progress',
desc: '进度条'
});
ANT_COMPONENTS.push({
title: 'QueueAnim',
desc: '进出场动画'
});
ANT_COMPONENTS.push({
title: 'Radio',
desc: '单选框'
});
ANT_COMPONENTS.push({
title: 'Select',
desc: '选择器'
});
ANT_COMPONENTS.push({
title: 'Slider',
desc: '滑动输入条'
});
ANT_COMPONENTS.push({
title: 'Spin',
desc: '加载中'
});
ANT_COMPONENTS.push({
title: 'Steps',
desc: '步骤条'
});
ANT_COMPONENTS.push({
title: 'Switch',
desc: '开关'
});
ANT_COMPONENTS.push({
title: 'Table',
desc: '表格'
});
ANT_COMPONENTS.push({
title: 'Tabs',
desc: '标签页'
});
ANT_COMPONENTS.push({
title: 'Tag',
desc: '标签'
});
ANT_COMPONENTS.push({
title: 'Timeline',
desc: '时间轴'
});
ANT_COMPONENTS.push({
title: 'Timepicker',
desc: '时间选择框'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '文件上传'
});
ANT_COMPONENTS.push({
title: 'Validation',
desc: '表单校验'
});
var i = location.pathname.split('/').lastIndexOf('ant-design');
if (i > 0) {
window.rootUrl = location.origin + location.pathname.split('/').slice(0, 2+1).join('/');
} else {
window.rootUrl = location.origin;
}
})();
</script>
<script src="../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.10.4',
stable: '0.10.4'
};
</script>
<script src="../dist/demo.js"></script>
<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
</head>
<body >
<header id="header" class="clearfix">
<a class="logo" href="..">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
Ant Design
</a>
<div class="search">
<div id="autoComplete"></div>
</div>
<nav class="nav">
<span class="bar"></span>
<ul>
<li class="">
<a href=".." data-no-instant>首页</a>
</li>
<li class="">
<a href="../spec/introduce">设计</a>
</li>
<li>
<a class="nav-link-disabled" href="">案例</a>
</li>
<li class="current">
<a href="./introduce">React</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
</li>
</ul>
</nav>
<div class="nav-phone-icon"></div>
</header>
<div class="main-wrapper">
<aside class="aside-container">
<ul>
<li class="">
<a href="introduce" class="">
Ant Design of React
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="getting-started" class="">
快速上手
<span class="chinese"></span>
</a>
</li>
<li class="current">
<a href="install" class="">
安装
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="upgrade-to-0.10" class="">
0.10 升级指南
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../changelog" class="">
更新日志
<span class="chinese"></span>
</a>
</li>
<li open="open">
<h4>Components</h4>
<ul class="">
<li class="type-divider">基本</li>
<li class="">
<a href="../components/button/"
class="">
Button
<span class="chinese">按钮</span>
</a>
</li>
<li class="">
<a href="../components/icon/"
class="">
Icon
<span class="chinese">图标</span>
</a>
</li>
<li class="">
<a href="../components/layout/"
class="">
Layout
<span class="chinese">布局</span>
</a>
</li>
<li class="type-divider">表单</li>
<li class="">
<a href="../components/checkbox/"
class="">
Checkbox
<span class="chinese">多选框</span>
</a>
</li>
<li class="">
<a href="../components/datepicker/"
class="">
Datepicker
<span class="chinese">日期选择框</span>
</a>
</li>
<li class="">
<a href="../components/form/"
class="">
Form
<span class="chinese">表单</span>
</a>
</li>
<li class="">
<a href="../components/input-number/"
class="">
InputNumber
<span class="chinese">数字输入框</span>
</a>
</li>
<li class="">
<a href="../components/radio/"
class="">
Radio
<span class="chinese">单选框</span>
</a>
</li>
<li class="">
<a href="../components/select/"
class="">
Select
<span class="chinese">选择器</span>
</a>
</li>
<li class="">
<a href="../components/slider/"
class="">
Slider
<span class="chinese">滑动输入条</span>
</a>
</li>
<li class="">
<a href="../components/switch/"
class="">
Switch
<span class="chinese">开关</span>
</a>
</li>
<li class="">
<a href="../components/timepicker/"
class="">
Timepicker
<span class="chinese">时间选择框</span>
</a>
</li>
<li class="">
<a href="../components/upload/"
class="">
Upload
<span class="chinese">文件上传</span>
</a>
</li>
<li class="">
<a href="../components/validation/"
class="">
Validation
<span class="chinese">表单校验</span>
</a>
</li>
<li class="type-divider">展示</li>
<li class="">
<a href="../components/alert/"
class="">
Alert
<span class="chinese">警告提示</span>
</a>
</li>
<li class="">
<a href="../components/badge/"
class="">
Badge
<span class="chinese">徽标数</span>
</a>
</li>
<li class="">
<a href="../components/calendar/"
class="">
Calendar
<span class="chinese">日历</span>
</a>
</li>
<li class="">
<a href="../components/carousel/"
class="">
Carousel
<span class="chinese">走马灯</span>
</a>
</li>
<li class="">
<a href="../components/collapse/"
class="">
Collapse
<span class="chinese">折叠面板</span>
</a>
</li>
<li class="">
<a href="../components/dropdown/"
class="">
Dropdown
<span class="chinese">下拉菜单</span>
</a>
</li>
<li class="">
<a href="../components/message/"
class=""data-no-instant>
Message
<span class="chinese">全局提示</span>
</a>
</li>
<li class="">
<a href="../components/modal/"
class="">
Modal
<span class="chinese">对话框</span>
</a>
</li>
<li class="">
<a href="../components/notification/"
class=""data-no-instant>
Notification
<span class="chinese">通知提醒框</span>
</a>
</li>
<li class="">
<a href="../components/popconfirm/"
class="">
Popconfirm
<span class="chinese">气泡确认框</span>
</a>
</li>
<li class="">
<a href="../components/popover/"
class="">
Popover
<span class="chinese">气泡卡片</span>
</a>
</li>
<li class="">
<a href="../components/progress/"
class="">
Progress
<span class="chinese">进度条</span>
</a>
</li>
<li class="">
<a href="../components/table/"
class="">
Table
<span class="chinese">表格</span>
</a>
</li>
<li class="">
<a href="../components/tag/"
class="">
Tag
<span class="chinese">标签</span>
</a>
</li>
<li class="">
<a href="../components/timeline/"
class="">
Timeline
<span class="chinese">时间轴</span>
</a>
</li>
<li class="">
<a href="../components/tooltip/"
class="">
Tooltip
<span class="chinese">文字提示</span>
</a>
</li>
<li class="">
<a href="../components/tree/"
class="">
Tree
<span class="chinese">树形控件</span>
</a>
</li>
<li class="type-divider">导航</li>
<li class="">
<a href="../components/breadcrumb/"
class="">
Breadcrumb
<span class="chinese">面包屑</span>
</a>
</li>
<li class="">
<a href="../components/menu/"
class="">
Menu
<span class="chinese">导航菜单</span>
</a>
</li>
<li class="">
<a href="../components/pagination/"
class="">
Pagination
<span class="chinese">分页</span>
</a>
</li>
<li class="">
<a href="../components/steps/"
class="">
Steps
<span class="chinese">步骤条</span>
</a>
</li>
<li class="">
<a href="../components/tabs/"
class="">
Tabs
<span class="chinese">标签页</span>
</a>
</li>
<li class="type-divider">其他</li>
<li class="">
<a href="../components/affix/"
class="">
Affix
<span class="chinese">固钉</span>
</a>
</li>
<li class="">
<a href="../components/queue-anim/"
class="">
QueueAnim
<span class="chinese">进出场动画</span>
</a>
</li>
<li class="">
<a href="../components/spin/"
class="">
Spin
<span class="chinese">加载中</span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section class="main-container">
<article class="markdown">
<h1>安装 </h1>
<h2 id="使用-npm-安装">使用 npm 安装<a href="#使用-npm-安装" class="anchor">#</a> </h2><p><strong>我们推荐使用 npm 的方式进行开发</strong>，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。</p>
<p>可以通过 npm 直接安装到本地，使用 <code>require</code> 或 <code>import</code> 进行引用。</p>
<p>稳定版 <span class="versions" id="stable-version"></span>：</p>
<p><a href="https://www.npmjs.org/package/antd"><img src="http://img.shields.io/npm/v/antd.svg?style=flat-square" alt="npm package"></a></p>
<div class="highlight"><pre><code class="bash">$ npm install antd --save</code></pre></div><p>安装最新的开发版本 <span class="versions" id="latest-version"></span>：</p>
<p><a href="https://www.npmjs.org/package/antd"><img src="https://cnpmjs.org/badge/v/antd.svg?&amp;tag=beta&amp;subject=npm" alt=""></a></p>
<div class="highlight"><pre><code class="bash">$ npm install antd@beta --save</code></pre></div><blockquote>
<p><strong>历史版本</strong>：<a href="https://github.com/ant-design/ant-design/releases">https://github.com/ant-design/ant-design/releases</a></p>
</blockquote>
<h2 id="开发工具">开发工具<a href="#开发工具" class="anchor">#</a> </h2><p>我们提供了开发构建的命令行工具，可以安装到全局直接使用。</p>
<div class="highlight"><pre><code class="bash">$ npm install antd-bin -g</code></pre></div><p>或者安装到仓库下，使用 <code>package.json</code> 的 <code>scripts</code> 字段来配置命令：</p>
<div class="highlight"><pre><code class="bash">$ npm install antd-bin --save-dev</code></pre></div><div class="highlight"><pre><code class="javascript"><span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"dev"</span>: <span class="hljs-string">"antd server"</span>,
<span class="hljs-string">"build"</span>: <span class="hljs-string">"antd build"</span>
}</code></pre></div><blockquote>
<p>更多<a href="https://github.com/ant-design/antd-bin/">使用方式</a>。</p>
</blockquote>
<style>
.versions {
font-weight: bold;
color: #C05B4D;
font-family: Consolas;
margin-left: 0.3em;
background: #FFF1E7;
padding: 2px 5px;
border-radius: 3px;
}
</style>
<script>
$('#latest-version').html(antdVersion.latest);
$('#latest-links a').each(function(i, item) {
$(item).attr('href', $(item).attr('href').replace('dist/antd', 'dist/antd-' + antdVersion.latest));
});
if (antdVersion.stable) {
$('#stable-version').html(antdVersion.stable);
$('#stable-link').attr('href', 'https://github.com/ant-design/ant-design/releases/tag/' + antdVersion.stable);
} else {
$('#stable-version').html('暂无');
$('#stable-link').hide();
}
</script>
</article>
</section>
</div><footer id="footer">
<ul>
<li>
<h2>GitHub</h2>
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">样式</a>
<a target="_blank" href="https://github.com/ant-design/antd-bin">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
</li>
<li>
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">反馈和建议</a>
<a target="_blank" href="https://gitter.im/ant-design/ant-design">讨论</a>
<a target="_blank" href="http://dwz.cn/2dJ2mg">报告 Bug</a>
</li>
<li>
<h3>©2015 蚂蚁金服体验技术部出品</h3>
<h3>文档版本：<span id="versions-select"></span></h3>
</li>
</ul>
</footer>
<script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
<script data-no-instant>
InstantClick.on('change', function() {
InstantClickChangeFns.forEach(function(fn) {
fn();
});
});
InstantClick.init();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink