一、简介
Ant Design Vue 是 Ant Design 的官方 Vue 实现,开发和服务于企业级后台产品。Ant Design Vue 组件库不仅包含了 Vue UI 组件,同时还提供了高质量的 Vue 文档和相关工具,使您构建高效、易用、美观的企业级应用程序更加容易。
Ant Design Vue基于ant design设计语言,引入了大量的React生态技术,使用Vue语言来重新实现React组件。主要包含了色彩、图标、排版、布局、导航、数据录入、数据展示、反馈、动画、组合组件等各个类别。
二、组件
Ant Design Vue一共有26个类别的组件,其中包括个人用户常用的数据展示组件、导航组件、操作反馈等组件,以及企业级用户用得比较多的表单组件、搜索组件、级联选择器等组件。下面介绍其中几个比较常用的组件。
1. Button 按钮组件
按钮组件是我们在前端界面设计中最常用的组件之一,Ant Design Vue Button组件除了能够支持文本标签按钮之外,还支持加载中、禁用、链接跳转等多种状态,非常方便灵活。
<template> <div> <a-button>Default</a-button> <a-button type="primary">Primary</a-button> <a-button type="dashed">Dashed</a-button> <a-button type="danger">Danger</a-button> <br /><br /> <a-button type="primary" shape="circle" icon="search" /> <a-button type="primary" shape="circle">A</a-button> <a-button type="primary" icon="search">Search</a-button> <a-button type="primary" loading>Loading</a-button> <br /><br /> <a-button-group> <a-button>Cancel</a-button> <a-button type="primary">OK</a-button> </a-button-group> </div> </template> <script> import {Button} from 'ant-design-vue'; export default { components: {Button}, } </script>
2. Table 表格组件
表格组件是企业级应用中最重要的组件之一,Ant Design Vue Table 组件支持强大的排序、筛选、分页、自定义列、固定表头、表格滚动等特性,同时可自适应不同分辨率,非常适合处理层次化的数据。
<template> <div> <a-table :columns="columns" :data-source="data"></a-table> </div> </template> <script> import {Table} from 'ant-design-vue'; export default { components: {Table}, data() { return { columns: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ], data: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, ] } } } </script>
3. Form 表单组件
表单组件是我们在开发中经常用到的组件,而在Ant Design Vue Form组件中,我们可以通过简单、易用、灵活的方式设计出符合我们要求的表单,也可以快速将表单页面进行响应式开发。
<template> <div> <a-form :form="form"> <a-form-item label="Username"> <a-input v-decorator="["username"]" placeholder="Please input your username"></a-input> </a-form-item> <a-form-item label="Password"> <a-input type="password" v-decorator="["password"]" placeholder="Please input your password"></a-input> </a-form-item> <a-form-item> <a-button type="primary" @click="handleSubmit">Submit</a-button> </a-form-item> </a-form> </div> </template> <script> import {Form, Input, Button} from 'ant-design-vue'; export default { components: {Form, Input, Button}, data() { return { form: this.$form.createForm(this), }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }, }, }; </script>
三、安装使用
1. 安装
我们可以通过npm的方式进行安装,也可以通过 CDN 引入。当前官方提供的版本是 Ant Design Vue 1.x
npm install ant-design-vue --save
2. 全局引入
推荐使用 Vue.use() 全局安装:
import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd);
3. 按需引入
按需加载 Antd Vue 组件,在 .babelrc(babel 配置文件)或者 webpack 配置中添加 babel-plugin-import 插件,并在 .babelrc(babel 配置文件)中进行如下配置即可实现按需加载代码
{ "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] ] }
四、总结
通过以上的介绍我们可以发现,Antd Design Vue组件库是一个非常完善的UI组件库,包含了非常丰富的颜色、图标、排版等基础组件以及大量符合实际需求的企业级组件,在我们的开发中可以帮助我们大量节省时间和成本,同时也让我们的开发变得更加简单方便高效。