目录
致谢
1.开发指南
1.1安装
1.2快速上手
1.3国际化
1.4自定义主题
1.5内置过渡动画
2.基本组件
2.2Container布局容器
2.3Color色彩
2.4Typography字体
2.5Icon图标
2.6Button按钮
2.1Layout布局
3.表单组件
3.1Radio单选框
3.2Checkbox多选框
3.3Input输入框
3.4InputNumber计数器
3.5Select选择器
3.6Cascader级联选择器
3.7Switch开关
3.8Slider滑块
3.9TimePicker时间选择器
-1-本文档使用书栈(BookStack.CN)构建
致谢
当前文档《Element-UI使用手册》由进击的皇虫使用书栈(BookStack.CN)进行构
建，生成于2018-01-20。
书栈(BookStack.CN)仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工
具。
文档内容由网友们编写和整理，书栈(BookStack.CN)难以确认文档内容知识点是否错漏。如
果您在阅读文档获取知识的时候，发现文档内容有不恰当的地方，请向我们反馈，让我们共同携手，
将知识准确、高效且有效地传递给每一个人。
同时，如果您在日常生活、工作和学习中遇到有价值有营养的知识文档，欢迎分享到书栈
(BookStack.CN)，为知识的传承献上您的一份力量！
如果当前文档生成时间太久，请到书栈(BookStack.CN)获取最新的文档，以跟上知识更新换
代的步伐。
文档地址：http://www.bookstack.cn/books/element-ui
书栈官网：http://www.bookstack.cn
书栈开源：https://github.com/TruthHun
分享，让知识传承更久远！感谢知识的创造者，感谢知识的分享者，也感谢每一位阅读到此处的
读者，因为我们都将成为知识的传承者。
致谢
-2-本文档使用书栈(BookStack.CN)构建
1.开发指南
安装
快速上手
国际化
自定义主题
内置过渡动画
开发指南
1.开发指南
-3-本文档使用书栈(BookStack.CN)构建
1.1安装
安装
npm安装
CDN
Helloworld
推荐使用npm的方式安装，它能更好地和webpack打包工具配合
使用。
1. npmielement-ui-S
目前可以通过unpkg.com/element-ui获取到最新版本的资源，在
页面上引入js和css文件即可开始使用。
1. <!--引入样式-->
2. <linkrel="stylesheet"href="https://unpkg.com/element-
ui/lib/theme-chalk/index.css">
3. <!--引入组件库-->
4. <scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
我们建议使用CDN引入Element的用户在链接地址上锁定版本，以免将来Element升级
时受到非兼容性更新的影响。锁定版本的方法请查看unpkg.com。
安装
npm安装
CDN
Helloworld
1.1安装
-4-本文档使用书栈(BookStack.CN)构建
通过CDN的方式我们可以很容易地使用Element写出一个Hello
world页面。在线演示
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <!--引入样式-->
6. <linkrel="stylesheet"href="https://unpkg.com/element-
ui/lib/theme-chalk/index.css">
7. </head>
8. <body>
9. <divid="app">
10. <el-button@click="visible=true">按钮</el-button>
11. <el-dialog:visible.sync="visible"title="Helloworld">
12. <p>欢迎使用Element</p>
13. </el-dialog>
14. </div>
15. </body>
16. <!--先引入Vue-->
17. <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
18. <!--引入组件库-->
19. <scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
20. <script>
21. newVue({
22. el:'#app',
23. data:function(){
24. return{visible:false}
25. }
26. })
27. </script>
28. </html>
如果是通过npm安装，并希望配合webpack使用，请阅读下一
节：快速上手。
1.1安装
-5-本文档使用书栈(BookStack.CN)构建
