快速上手 - 图1

快速上手

Ant Design Vue 致力于提供给程序员愉悦的开发体验。

在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了 Node.js v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。

使用 vue-cli@3

我们为新版的 vue-cli 准备了相应的 Ant Design Vue 插件，你可以用它们快速地搭建一个基于 Ant Design Vue 的项目。

在线演示

最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 Bug Report。

  • Vue Antd Template

引入 ant-design-vue

1. 安装脚手架工具

vue-cli

  1. $ npm install -g @vue/cli
  2. # OR
  3. $ yarn global add @vue/cli

2. 创建一个项目

使用命令行进行初始化。

  1. $ vue create antd-demo

并配置项目。

若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。

3. 使用组件

  1. $ npm i --save ant-design-vue

完整引入

  1. import Vue from 'vue';
  2. import Antd from 'ant-design-vue';
  3. import App from './App';
  4. import 'ant-design-vue/dist/antd.css';
  5. Vue.config.productionTip = false;
  7. Vue.use(Antd);
  9. /* eslint-disable no-new */
  10. new Vue({
  11.   el: '#app',
  12.   components: { App },
  13.   template: '<App/>',
  14. });

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

局部导入组件

  1. import Vue from 'vue';
  2. import { Button, message } from 'ant-design-vue';
  3. import App from './App';
  5. Vue.config.productionTip = false;
  7. /* v1.1.2 */
  8. Vue.component(Button.name, Button);
  9. Vue.component(Button.Group.name, Button.Group);
  11. /* v1.1.3+ 自动注册Button下组件，如Button.Group */
  12. Vue.use(Button);
  14. Vue.prototype.$message = message;
  16. /* eslint-disable no-new */
  17. new Vue({
  18.   el: '#app',
  19.   components: { App },
  20.   template: '<App/>',
  21. });

你可以在左侧菜单选用更多组件。

4. 组件列表

完整组件列表

兼容性

Ant Design Vue 支持所有的现代浏览器和 IE9+。

对于 IE 系列浏览器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

如果你使用了 babel，强烈推荐使用 babel-polyfill 和 babel-plugin-transform-runtime 来替代以上两个 shim。

避免同时使用 babel 和 shim 两种兼容方法，以规避 #6512 中所遇问题

按需加载

如果你在开发环境的控制台看到下面的提示，那么你可能使用了 import { Button } from 'ant-design-vue'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

快速上手 - 图3

可以通过以下的写法来按需加载组件。

  1. import Button from 'ant-design-vue/lib/button';
  2. import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

  1. import { Button } from 'ant-design-vue';

插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

配置主题和字体

小贴士

  • 你可以享用 npm 生态圈里的所有模块。
  • 虽然 Vue 官方推荐模板编写组件，不过对于复杂组件，jsx未必不是一个更好的选择。