ant-design-vue快速上手,推荐安装和配置Node.js v8.9或以上。并且要会Vue和ES2015。
引入ant-design-vue
1.安装脚手架工具
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
2.创建一个项目
使用命令行进行初始化,并配置项目
$ vue create antd-demo
3.使用组件
$ npm i --save ant-design-vue
完整的引入:以下的代码完成了Antd的引入。需要注意的就是样式文件需要单独引入。
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false; Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});
局部导入组件
import Vue from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';
Vue.config.productionTip = false;
/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);
/* v1.1.3+ 自动注册Button下组件,如Button.Group */
Vue.use(Button); Vue.prototype.$message = message;
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});
兼容性:对于IE系列浏览器,需要提供es5-shim和es6-shim等Polyfills的支持。
如果使用了babel,网上强烈推荐使用babel-polyfill和babel-plugin-transform-runtime来代替上面两个shim。
如果在开发环境的控制台看下如下提示:
可能是使用了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,那么可以使用babel-plugin-import来进行按需加载,加入这个插件后,可以这么写:
import { Button } from 'ant-design-vue';
插件会帮你转换成 ant-design-vue/lib/xxx的写法。另外此插件配合style属性可以做到模块样式的按需自动加载。