快速上手

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

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

    引入 ant-design-vue

    vue-cli

    使用命令行进行初始化。

    1. $ vue create antd-demo

    并配置项目。

    完整引入

    1. import { createApp } from 'vue';
    2. import Antd from 'ant-design-vue';
    4. import 'ant-design-vue/dist/antd.css';
    5. const app = createApp();
    6. app.config.productionTip = false;

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

    局部导入组件

    Ant Design Vue 2.x 支持所有的现代浏览器和 IE11+。

    如果需要支持 IE9+，你可以使用 Ant Design Vue 1.x & Vue 2.x。

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

    按需加载

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

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

    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，那么可以使用 来进行按需加载，加入这个插件后。你可以仍然这么写：

    小贴士

    • 虽然 Vue 官方推荐模板编写组件，不过对于复杂组件，未必不是一个更好的选择。