Ant Design of Vue学习(二)

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。

如果在开发环境的控制台看下如下提示:
image.png
可能是使用了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属性可以做到模块样式的按需自动加载。

暂无评论