Ant Design Vue 快速避坑指南

Ant Design Vue 是一款基于 Vue.js 的 UI 组件库，它提供了许多丰富的组件，如按钮、表单、弹窗等等。使用 Ant Design Vue 可以大大缩短前端开发时间，但是使用过程中也会遇到一些坑点，本文将介绍 Ant Design Vue 的使用指南及避坑秘籍。

安装

要使用 Ant Design Vue 首先需要先安装它，可以使用 npm 或 yarn 进行安装：

npm install ant-design-vue --save
# 或
yarn add ant-design-vue

引入

为了在项目中使用 Ant Design Vue，需要在项目中引入 Ant Design Vue 的样式和组件。可以在 main.js 文件中引入 Ant Design Vue：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

使用

接下来就可以在项目中使用 Ant Design Vue 提供的组件了，比如我们可以在项目中使用按钮组件：

<template>
  <a-button type="primary">Primary Button</a-button>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

避坑指南

使用表单组件时要注意 form 属性

Ant Design Vue 提供的表单组件非常丰富，如 a-input、a-form-item、a-select 等等，但是在使用表单组件时要注意 form 属性，如果忘记添加 form 属性，表单组件将无法正常工作。

<template>
  <a-form>
    <a-form-item label="Username" :required="true">
      <a-input v-model="form.username" placeholder="Please input your username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSubmit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      form: {
        username: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.form.username);
    }
  }
}
</script>

使用图片组件时要注意 src 属性

Ant Design Vue 提供的图片组件 a-avatar、a-image 等等，但是在使用图片组件时要注意 src 属性，如果忘记添加 src 属性，图片组件将无法正常显示。

<template>
  <a-image width="200" height="200" :src="imageUrl" />
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      imageUrl: 'https://picsum.photos/200'
    }
  }
}
</script>