Ant Design Vue 快速上手指南 + 排坑

引言

Ant Design Vue (简称 AD Vue) 是基于 Vue.js 的高质量 UI 组件库，由蚂蚁金服设计团队开发并维护。它提供了丰富的组件和示例，能够帮助开发者快速构建出美观且易用的 Web 应用程序。本文将指导你如何快速入门 AD Vue，并分享一些常见的“坑”以及如何避免它们。

安装与配置

1. 安装 AD Vue

你可以通过 npm 安装 AD Vue 到你的项目中：

Bash

深色版本

1npm install ant-design-vue --save

2. 配置 Babel 插件

为了支持按需加载组件，你需要安装 babel-plugin-import 并在 .babelrc 或 babel.config.js 中进行配置：

Bash

深色版本

1npm install --save-dev babel-plugin-import

然后在你的 .babelrc 文件中添加以下配置：

Json

深色版本

1{
2  "plugins": [
3    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
4  ]
5}

3. 安装 Less 和 Less-Loader

AD Vue 使用 Less 进行样式定制，因此你需要安装它们：

Bash

深色版本

1npm install less less-loader --save-dev

注意，如果你遇到 less-loader 版本过高的问题，可以指定一个较旧的版本，例如：

Bash

深色版本

1npm install less-loader@5 --save-dev

4. 配置 Webpack

确保你的 Webpack 配置正确处理 Less 文件：

Javascript

深色版本

1// webpack.config.js
2module.exports = {
3  // ...
4  module: {
5    rules: [
6      // ...
7      {
8        test: /\.less$/,
9        use: [
10          'style-loader',
11          'css-loader',
12          {
13            loader: 'less-loader',
14            options: {
15              lessOptions: {
16                modifyVars: {
17                  // 自定义主题变量
18                  '@primary-color': '#1DA57A',
19                  '@link-color': '#1DA57A',
20                  // ...
21                },
22                javascriptEnabled: true,
23              },
24            },
25          },
26        ],
27      },
28    ],
29  },
30};

快速开始

1. 引入组件

在你的 Vue 文件中，可以按需引入所需的组件：

Javascript

深色版本

1import { Button } from 'ant-design-vue';
2
3export default {
4  components: {
5    [Button.name]: Button,
6  },
7};

2. 使用组件

在模板中使用你刚刚引入的组件：

Html

深色版本

1<template>
2  <a-button type="primary">按钮</a-button>
3</template>

常见问题及解决方案

问题 1: 表单双向绑定的问题

场景: 当你在 Form 组件中使用双向绑定时，可能会导致数据在多个组件间同步更新，这通常不是预期的行为。

解决方案: 避免在 Form 组件中直接使用双向绑定。你应该在表单提交成功或失败后手动同步数据。

Javascript

深色版本

1// 不推荐
2<a-form-model :model="form">
3  <a-form-model-item prop="name">
4    <a-input v-model="form.name"></a-input>
5  </a-form-model-item>
6</a-form-model>
7
8// 推荐
9<a-form :model="form">
10  <a-form-item prop="name">
11    <a-input v-model="form.name"></a-input>
12  </a-form-item>
13</a-form>
14
15methods: {
16  submitForm() {
17    this.$refs.form.validate(valid => {
18      if (valid) {
19        // 更新状态或发送数据
20        this.form.name = 'New Value';
21      }
22    });
23  }
24}

问题 2: 自动校验/收集功能的使用

场景: 如果你不使用 Form 的自动校验/收集功能，你仍然可以使用 v-model。

解决方案: 只有在需要自动校验和收集数据时才使用 v-decorator。

Javascript

深色版本

1// 使用 v-decorator
2<a-form ref="form" :model="form" :rules="rules">
3  <a-form-item prop="name">
4    <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称' }] }]"></a-input>
5  </a-form-item>
6</a-form>
7
8// 不使用 v-decorator
9<a-form :model="form">
10  <a-form-item prop="name">
11    <a-input v-model="form.name"></a-input>
12  </a-form-item>
13</a-form>

结语

通过本文，你已经了解了如何快速上手 Ant Design Vue 以及如何避免一些常见的问题。希望这些经验能帮助你更高效地使用 AD Vue 开发项目。