快速上手
Ant Design Vue 致力于提供给程序员愉悦的开发体验。
我们为新版的 vue-cli 准备了相应的 插件,你可以用它们快速地搭建一个基于 Ant Design Vue 的项目。
在线演示
最简单的使用方式参照以下 CodeSandbox 演示,也推荐 Fork 本例来进行 。
使用命令行进行初始化。
$ vue create antd-demo
并配置项目。
完整引入
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
new Vue({
el: '#app',
components: { App },
});
以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。
局部导入组件
兼容性
Ant Design Vue 支持所有的现代浏览器和 IE9+。
对于 IE 系列浏览器,需要提供 和 es6-shim 等 Polyfills 的支持。
如果你在开发环境的控制台看到下面的提示,那么你可能使用了 import { Button } from 'ant-design-vue';
的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
可以通过以下的写法来按需加载组件。
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
如果你使用了 babel,那么可以使用 来进行按需加载,加入这个插件后。你可以仍然这么写:
插件会帮你转换成 ant-design-vue/lib/xxx
的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。
配置主题和字体
- 你可以享用 生态圈里的所有模块。