antddesignvue开发指南

一、简介

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组件库，包含了非常丰富的颜色、图标、排版等基础组件以及大量符合实际需求的企业级组件，在我们的开发中可以帮助我们大量节省时间和成本，同时也让我们的开发变得更加简单方便高效。