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組件庫，包含了非常豐富的顏色、圖標、排版等基礎組件以及大量符合實際需求的企業級組件，在我們的開發中可以幫助我們大量節省時間和成本，同時也讓我們的開發變得更加簡單方便高效。