ant-design-vue是蚂蚁金服 Ant Design【https://antdv.com/】 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件风格与Ant Design保持同步,组件html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。
下面具体讲解下该组件库的应用实践。
一、安装组件库
npm install ant-design-vue --save
如果网络环境不佳,推荐使用 cnpm。
二、 引入
在main.js中全局引入并注册
a.全部引入
import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
Vue.use(ant)
b.引入部分组件
import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
Vue.use(Button)
c.按需加载
ant-design-vue使用babel-plugin-import进行按需加载。
安装babel-plugin-import插件
npm i babel-plugin-import --save-dev
修改.babelrc文件,在plugins节点下,添加下面这个配置项:
"plugins": ["transform-vue-jsx", "transform-runtime",
[
"import",
{
"libraryName": "ant-design-vue",
"libraryDirectory": "lib",
"style": "css"
}
]
]
在需要使用相关组件的页面引入,并注册即可实现按需加载。
<template>
<div>
<a-button type="primary">hello world</a-button>
</div>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
components:{ AButton:Button },
}
</script>
应用
直接在项目中可以使用,在antd官网复制即可
<a-button type="primary">Primary</a-button>
注:请严格按照官方文档操作,否则会错的很离谱。
例如,应用icon图标时,正确使用方式如下:
<a-icon type="fullscreen"/>
而绝非如下方式:
<a-icon type="fullscreen"></a-icon>
使用上述错误方式,会导致浏览器无法解析ant-design-vue,从而报错!