home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-15 07:46:41 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
8320194d638fd7bbb608a2b7fa3ad1a9ad566538
ant-design/docs/react/install.html
T
afc163 8320194d63 Updates
2016-04-27 17:27:53 +08:00

655 lines
20 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">
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.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: 'Cascader',
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: 'TimePicker',
desc: '时间选择框'
});
ANT_COMPONENTS.push({
title: 'Timeline',
desc: '时间轴'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Transfer',
desc: '穿梭框'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'TreeSelect',
desc: '树选择'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '上传'
});
// fix ie location origin
// http://stackoverflow.com/questions/22564167/window-location-origin-gives-wrong-value-when-using-ie
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//"
+ window.location.hostname
+ (window.location.port ? ':' + window.location.port : '');
}
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>
window.antdVersion = {
latest: '0.12.16'
};
</script>
<script src="../../dist/demo.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" tabindex="-1">
<span class="bar"></span>
<ul>
<li class="">
<a href="../..">首页</a>
</li>
<li class="">
<a href="../practice/cases">实践</a>
</li>
<li class="">
<a href="../pattern/navigation">模式</a>
</li>
<li class="current">
<a href="./introduce">组件</a>
</li>
<li class="">
<a href="../spec/introduce">语言</a>
</li>
<li class="">
<a href="../resource/download">资源</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-notes"
class="">
升级指南
<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/cascader/"
class="">
Cascader
<span class="chinese">级联选择</span>
</a>
</li>
<li class="">
<a href="../../components/checkbox/"
class="">
Checkbox
<span class="chinese">多选框</span>
</a>
</li>
<li class="">
<a href="../../components/date-picker/"
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/time-picker/"
class="">
TimePicker
<span class="chinese">时间选择框</span>
</a>
</li>
<li class="">
<a href="../../components/transfer/"
class="">
Transfer
<span class="chinese">穿梭框</span>
</a>
</li>
<li class="">
<a href="../../components/tree-select/"
class="">
TreeSelect
<span class="chinese">树选择</span>
</a>
</li>
<li class="">
<a href="../../components/upload/"
class="">
Upload
<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>安装 <span class="subtitle"></span></h1>
<div class="toc"><ul><li><a href="#使用-npm-安装">使用 npm 安装</a></li><li><a href="#浏览器引入">浏览器引入</a></li><li><a href="#开发工具">开发工具</a></li></ul></div>
<h2 id="使用-npm-安装">使用 npm 安装<a href="#使用-npm-安装" class="anchor">#</a> </h2><p><strong>我们推荐使用 npm 的方式进行开发</strong>，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。</p>
<p>可以通过 npm 直接安装到项目中，使用 <code>import</code> 或 <code>require</code> 进行引用。</p>
<p>稳定版：</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>开发版本：</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>官方目前不提供单独的构建文件，建议开发者自行构建 <code>antd.js</code> 和 <code>antd.css</code>。我们提供了一个 <a href="https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone">构建的例子</a> 以供参考。</p>
<h2 id="开发工具">开发工具<a href="#开发工具" class="anchor">#</a> </h2><p>我们提供了 React 前端应用开发的 <a href="https://github.com/ant-design/antd-init">脚手架工具</a>，可以安装到全局直接使用。</p>
<div class="highlight"><pre><code class="bash">$ npm install antd-init -g</code></pre></div><p>在空目录运行 <code>antd-init</code> 可以初始化一个 antd 的前端应用。</p>
<p>最新的脚手架结构可以到这里 <a href="https://github.com/ant-design/antd-init/tree/master/boilerplate">查看</a>，建议持续关注更新以便获得最新的开发工程特性。</p>
<blockquote>
<p>更多开发工具 <a href="http://ant-tool.github.io/">使用方式</a>。</p>
</blockquote>
</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/antd-init">脚手架</a>
<a target="_blank" href="http://ant-tool.github.io/">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a target="_blank" href="https://github.com/ant-ued/blog">博客 - 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/2AF9ao">报告 Bug</a>
</li>
<li>
<div>©2015 蚂蚁金服体验技术部出品</div>
<div>文档版本：<span id="versions-select"></span></div>
</li>
</ul>
</footer>
<script data-no-instant>
if (!location.port) {
(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');
InstantClick.on('change', function() {
ga('send', 'pageview', location.pathname + location.search);
});
}
</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