为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Ant Design Vue教程：快速入门与实战

Ant Design Vue教程：快速入门与实战

标签：
前端工具 设计 Vue.js
概述

本文详细介绍了ant-design-vue教程，包括其安装、基础组件使用、表单与表单验证、自定义主题与样式等内容，帮助读者快速掌握如何使用Ant Design Vue构建企业级Web应用。

Ant Design Vue简介

Ant Design Vue是什么

Ant Design Vue是由Ant Design团队开发的一款基于Vue.js的UI库。它提供了一套全面的组件集合，用于构建企业级Web应用，包括但不限于按钮、输入框、布局、表单等基础组件，以及更复杂的卡片、模态框、表格等组件。该库遵循Ant Design的设计语言，界面简洁、美观，同时兼容各种浏览器和设备。

Ant Design Vue的优势

  1. 丰富的组件库：提供了从基础组件到复杂组件的全面覆盖，能满足各种前端开发需求。
  2. 高度可定制：支持自定义主题色、字体、间距等，使得开发的界面更符合业务需求。
  3. 一致的设计语言：所有组件都遵循统一的设计规范，界面风格统一。
  4. 响应式设计：内置响应式布局，能够自动适应不同设备的屏幕尺寸。
  5. 完善的文档：官方提供了详细的文档和示例代码，方便开发者快速上手和查阅。

安装与引入Ant Design Vue

使用Ant Design Vue需要先安装Vue.js和Ant Design Vue的库。可以通过npm或yarn来安装：

# 使用 npm
npm install ant-design-vue

# 或者使用 yarn
yarn add ant-design-vue

安装完成后，需要在Vue项目中引入Ant Design Vue的核心模块：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

这样就完成了Ant Design Vue的基本引入。

基础组件使用

Button按钮组件

按钮组件是最常见的交互元素，Ant Design Vue提供了丰富的按钮样式，包括默认、主按钮、危险等类型。以下是如何创建一个按钮组件的示例。

<template>
  <a-button type="primary">主要按钮</a-button>
</template>

<script>
import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';

export default defineComponent({
  components: {
    AButton: Button,
  },
});
</script>

Input输入框组件

输入框组件用于收集用户的输入信息，Ant Design Vue提供了多种输入框样式，包括文本输入、密码输入、数字输入等。下面是一个简单的文本输入框示例。

<template>
  <a-input placeholder="请输入文本" />
</template>

<script>
import { defineComponent } from 'vue';
import { Input } from 'ant-design-vue';

export default defineComponent({
  components: {
    AInput: Input,
  },
});
</script>

Layout布局组件

布局组件帮助开发者快速构建复杂的页面结构，Ant Design Vue提供了Row、Col等组件来实现灵活的布局。下面是如何定义一个简单的页面布局。

<template>
  <a-row>
    <a-col :span="12">
      <div>12列</div>
    </a-col>
    <a-col :span="12">
      <div>12列</div>
    </a-col>
  </a-row>
</template>

<script>
import { defineComponent } from 'vue';
import { Row, Col } from 'ant-design-vue';

export default defineComponent({
  components: {
    ARow: Row,
    ACol: Col,
  },
});
</script>
表单与表单验证

创建与配置表单

表单组件是Ant Design Vue的核心组件之一，用于收集用户输入的数据。创建表单时，需要使用a-form和a-form-item标签。

<template>
  <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
    <a-form-item label="用户名">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码">
      <a-input v-model="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Input } from 'ant-design-vue';

export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
});
</script>

表单验证规则

Ant Design Vue提供了强大的表单验证能力，支持多种验证规则，如必填、长度限制等。

<template>
  <a-form
    :model="form"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 14 }"
    :rules="rules"
  >
    <a-form-item label="用户名" name="username">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input v-model="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Input } from 'ant-design-vue';

export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2到10个字符之间', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
});
</script>

表单提交与响应

通过表单组件的submit方法可以提交表单数据，并处理表单的响应。

<template>
  <a-form
    :model="form"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 14 }"
    :rules="rules"
    @submit="handleSubmit"
  >
    <a-form-item label="用户名" name="username">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input v-model="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Input } from 'ant-design-vue';

export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2到10个字符之间', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.formRef.validateFields().then(values => {
        console.log('收到的值: ', values);
      }).catch(info => {
        console.log('验证失败: ', info);
      });
    },
  },
});
</script>
更多组件介绍

Card卡片组件

卡片组件用于展示内容的块，可以包含标题、描述、图片等。

<template>
  <a-card title="卡片标题">
    <p>卡片内容</p>
  </a-card>
</template>

<script>
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';

export default defineComponent({
  components: {
    ACard: Card,
  },
});
</script>

Modal模态框组件

模态框组件用于展示重要信息，并阻止用户与页面其他部分进行交互。

<template>
  <a-modal v-model:visible="visible" title="模态框标题" @ok="handleOk">
    <p>模态框内容</p>
  </a-modal>
  <a-button type="primary" @click="handleClick">点击打开模态框</a-button>
</template>

<script>
import { defineComponent } from 'vue';
import { Modal, Button } from 'ant-design-vue';

export default defineComponent({
  components: {
    AModal: Modal,
    AButton: Button,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleClick() {
      this.visible = true;
    },
    handleOk(e) {
      console.log('点击确定按钮: ', e);
      this.visible = false;
    },
  },
});
</script>

Table表格组件

表格组件用于展示大量数据，可以进行排序、筛选、拖拽等操作。

<template>
  <a-table :columns="columns" :data="data" :row-key="record => record.id" />
</template>

<script>
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

const data = [
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 22 },
  { id: 3, name: '王五', age: 24 },
];

export default defineComponent({
  components: {
    ATable: Table,
  },
  setup() {
    return {
      columns,
      data,
    };
  },
});
</script>
自定义主题与样式

自定义主题色

通过设置全局主题变量，可以改变所有组件的默认颜色，使得界面更符合项目需求。

<style>
@import '~ant-design-vue/es/style/themes/default.css';

/* 自定义主题色 */
#app {
  --ant-btn-primary-bg: #1890ff;
  --ant-btn-primary-border: #1890ff;
  --ant-btn-primary-color: #fff;
}
</style>

样式覆盖与调整

在某些情况下，可能需要覆盖Ant Design Vue组件的默认样式。可以通过CSS选择器来实现。

<style>
/* 覆盖按钮的默认样式 */
.ant-btn {
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff;
}
</style>

响应式设计调整

Ant Design Vue内置了响应式布局，可以通过媒体查询来实现不同屏幕尺寸的样式调整。

<style>
@media (max-width: 768px) {
  .custom-class {
    font-size: 14px;
    margin: 0;
  }
}
</style>
实战项目：构建一个简单的登录界面

需求分析

设计一个简单的登录界面，包括用户名、密码输入框，以及登录按钮。登录按钮点击后，需要验证用户名和密码是否符合要求，并显示提示信息。

设计实现

首先，使用Ant Design Vue的表单组件创建登录表单，包括输入框和按钮。

<template>
  <a-form
    :model="form"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 14 }"
    :rules="rules"
    @submit="handleSubmit"
  >
    <a-form-item label="用户名" name="username">
      <a-input v-model="form.username" placeholder="请输入用户名" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input v-model="form.password" type="password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Input } from 'ant-design-vue';

export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2到10个字符之间', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.formRef.validateFields().then(values => {
        console.log('收到的值: ', values);
        // 模拟登录验证
        if (values.username === 'admin' && values.password === '123456') {
          alert('登录成功');
        } else {
          alert('登录失败');
        }
      }).catch(info => {
        console.log('验证失败: ', info);
      });
    },
  },
});
</script>

调试与优化

在实际开发中，需要调试表单的验证逻辑，并优化UI的显示效果。可以通过控制台查看错误信息，并调整样式来优化界面。


<style>
.login-form {
  width: 300px;
  margin: 50px auto;
}
</style>
``

以上就是使用Ant Design Vue构建一个简单的登录界面的完整过程，包括需求分析、设计实现和调试优化等步骤。希望这个例子能够帮助你更好地理解和使用Ant Design Vue。
点击查看更多内容
发表于 2024.10.17 15:30， 共 77 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

牧羊人nacy

手记
篇
粉丝
5
获赞与收藏
26

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消