【前端开发】从0到1：Anti-Design-Vue上手秘籍

目录

一、开篇：Anti-Design-Vue 是什么

二、准备工作：搭建开发环境

（一）安装 Node.js

（二）创建 Vue 项目

（三）安装 Anti-Design-Vue

三、基础组件初体验

（一）Button 组件

（二）Input 组件

（三）Card 组件

四、深入布局与样式

（一）Layout 布局组件

（二）自定义样式

覆盖默认样式

自定义主题

五、实战演练：构建登录页面

（一）页面结构搭建

（二）表单验证实现

（三）交互逻辑添加

六、总结与展望

一、开篇：Anti-Design-Vue 是什么

在前端开发的广阔天地里，构建一个美观、高效且用户体验出色的界面，是每一位开发者的追求。而在这个过程中，UI 组件库就像是我们的得力助手，能帮助我们快速搭建起界面的基本框架。今天，我要给大家介绍一款非常优秀的基于 Vue.js 的 UI 组件库 ——Anti-Design-Vue 。

Anti-Design-Vue，是 Ant Design 设计语言在 Vue.js 框架上的实现。Ant Design 最初是由蚂蚁金服团队开发并维护，它有着一套完整且成熟的设计规范和视觉风格，在业界广受好评。而 Anti-Design-Vue 将 Ant Design 的优势与 Vue.js 的简洁易用相结合，为 Vue 开发者提供了一系列丰富、高质量且易于使用的 UI 组件 ，如按钮、表单、表格、弹窗等等。

使用 Anti-Design-Vue，就好比拥有了一套精致的建筑模板。以往我们构建前端界面时，可能需要从最基础的 HTML、CSS 代码一点点拼凑，而现在借助它，我们可以直接使用这些预先设计好的组件，就像搭积木一样，快速完成界面的搭建，大大提高了开发效率。而且，这些组件都经过了精心设计和优化，在样式上统一美观，在交互上也符合用户习惯，能有效提升用户体验。例如，它的按钮组件有着多种类型和尺寸可供选择，无论是主要操作按钮还是次要辅助按钮，都能轻松找到合适的样式，并且按钮的点击效果和过渡动画都非常流畅自然；再比如表单组件，对输入框、下拉框、单选框、复选框等常见表单元素都有完善的支持，不仅样式好看，还提供了丰富的验证和交互功能，让用户在填写表单时更加便捷和舒适。

不仅如此，Anti-Design-Vue 还具备高度的可定制性和可扩展性。开发者可以根据项目的实际需求，灵活地对组件进行自定义配置，改变其样式、行为等。它还支持主题定制，你可以轻松打造出符合项目品牌形象的独特主题。同时，随着项目的不断发展和功能的日益复杂，Anti-Design-Vue 的扩展性能够很好地满足我们添加新功能和组件的需求，让项目具有更强的生命力和适应性。

如果你是一名 Vue 开发者，无论是新手想要快速上手开发出漂亮的界面，还是经验丰富的老手追求更高的开发效率和更优质的用户体验，Anti-Design-Vue 都绝对值得你深入学习和使用。接下来，就让我们一起走进 Anti-Design-Vue 的世界，探索它的奥秘吧！

二、准备工作：搭建开发环境

在正式开启 Anti-Design-Vue 的学习之旅前，我们得先把开发环境搭建好。这就好比建造房屋，得先准备好地基和各种建筑材料，下面我们一步步来。

（一）安装 Node.js

Node.js 可是前端开发的必备 “神器”，它为 JavaScript 提供了在服务器端运行的环境。对于 Vue 项目开发来说，它更是至关重要，因为我们后续要用到的 Vue CLI（Vue 的命令行工具）以及项目依赖管理，都依赖于 Node.js。就像汽车需要发动机才能跑起来，Vue 项目少不了 Node.js 这个 “发动机”。

安装步骤如下：

1. 打开浏览器，访问 Node.js 的官方网站（https://nodejs.org/ ）。

1. 在官网首页，你会看到有两个版本可供选择，一个是长期支持版本（LTS），稳定性高，适合大多数开发场景；另一个是当前版本（Current），包含了最新的特性，但可能稳定性稍逊一筹。建议初学者选择 LTS 版本。点击对应的安装包下载按钮，根据你的操作系统（Windows、Mac 或 Linux）选择合适的安装包进行下载。

1. 下载完成后，找到安装包并运行。在安装向导中，一路点击 “Next”（下一步）即可，期间可以选择安装路径等选项，保持默认设置也没问题。安装过程中可能会出现要求安装其他依赖项或组件的提示，按照提示操作就行。

1. 安装完成后，验证是否安装成功。打开命令行工具（Windows 下是命令提示符或 PowerShell，Mac 和 Linux 下是终端），输入node -v ，如果显示出 Node.js 的版本号，那就说明安装成功啦！同时，还可以输入npm -v 来查看 npm（Node Package Manager，Node.js 的包管理器）的版本号，npm 是随着 Node.js 一起安装的，用于管理项目中的依赖包。

（二）创建 Vue 项目

有了 Node.js 这个 “得力助手” 后，我们就可以借助 Vue CLI 来创建一个全新的 Vue 项目了。Vue CLI 就像是一个项目模板生成器，能快速帮我们搭建好项目的基本结构，让我们专注于业务逻辑的开发。

创建步骤如下：

1. 确保你已经全局安装了 Vue CLI。如果没有安装，可以在命令行中执行以下命令进行安装：

npm install -g @vue/cli

安装过程可能需要一些时间，请耐心等待。安装完成后，输入vue --version ，如果显示出版本号，说明安装成功。

2. 在命令行中，切换到你希望创建项目的目录。比如，我想在 D 盘的 projects 文件夹下创建项目，就先输入d: 进入 D 盘，再输入cd projects 进入 projects 文件夹。

3. 执行创建项目的命令：

vue create my - anti - design - project

这里的my - anti - design - project 是你给项目取的名字，你可以根据自己的喜好进行修改，但注意不要包含特殊字符和中文，建议使用小写字母和短横线组合的方式命名。

4. 执行命令后，会出现一个交互式的界面，让你选择项目的预设配置。这里有两种选择：

• Default (babel, eslint)：默认选项，会自动帮你安装 Babel（用于将 ES6 + 代码转换为浏览器能识别的 ES5 代码）和 ESLint（用于代码风格检查和错误提示）。如果你是初学者，对这些配置不太熟悉，选择这个选项可以快速创建项目。

• Manually select features：手动选择特性配置。如果你有特定的需求，比如需要使用路由（Router）、状态管理（Vuex）、CSS 预处理器等，可以选择这个选项来自定义项目配置。这里我们选择手动配置，以满足后续使用 Anti-Design-Vue 的需求。

1. 选择手动配置后，会列出一系列可选的特性。我们需要勾选以下几个：

• Babel：必须勾选，用于处理 ES6 + 语法，让我们能在项目中使用最新的 JavaScript 特性。

• Router：如果你的项目需要页面跳转和路由功能，就勾选它。这里我们勾选，因为大多数项目都会用到路由。

• Vuex：用于状态管理，当项目比较复杂，组件之间的数据共享和管理变得困难时，Vuex 就派上用场了。我们也勾选它。

• CSS Pre - processors：CSS 预处理器，让我们可以使用更强大的 CSS 语法，如 Less、Sass 等。这里我们选择 Less 作为预处理器。

• Linter / Formatter：代码格式校验工具，帮助我们保持代码风格的统一和规范。我们选择 ESLint + Standard config，这是一种常用的代码风格规范。

1. 接着会询问是否使用 history 模式的路由。history 模式的路由在 URL 中不会出现 #符号，看起来更美观，但需要服务器进行额外的配置，否则在刷新页面时可能会出现 404 错误。对于初学者，建议选择默认的n 不使用。

1. 选择完上述配置后，Vue CLI 就会开始安装项目所需的依赖包，这个过程可能需要一些时间，取决于你的网络速度，请耐心等待。安装完成后，项目就创建成功啦！

（三）安装 Anti-Design-Vue

项目创建好了，接下来就是把我们的主角 Anti-Design-Vue 引入到项目中。有两种常见的安装方式：

方式一：使用 npm 安装

在项目的根目录下（也就是包含package.json 文件的目录），打开命令行工具，执行以下命令：

npm install ant - design - vue --save

--save 参数会将 Anti-Design-Vue 及其依赖项添加到项目的package.json 文件中，方便后续管理和部署。

方式二：使用 Vue CLI 插件安装（推荐）

如果你使用的是 Vue CLI 3.0 及以上版本，还可以通过 Vue CLI 插件来安装 Anti-Design-Vue，这种方式会自动帮你进行一些配置，更加方便快捷。在项目根目录下的命令行中执行：

vue add ant - design - vue

执行这个命令后，会弹出一个交互式的界面，询问你一些配置选项，保持默认设置即可，然后等待安装完成。

安装完成后，我们还需要在项目中引入 Anti-Design-Vue。在项目的入口文件main.js 中，添加以下代码：

import Vue from 'vue';

import Antd from 'ant-design-vue';

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

import App from './App.vue';

Vue.use(Antd);

Vue.config.productionTip = false;

new Vue({

render: h => h(App)

}).$mount('#app');

上述代码中，首先引入了 Vue 和 Anti-Design-Vue，然后引入了 Anti-Design-Vue 的样式文件antd.css ，这样我们才能看到组件的默认样式。接着通过Vue.use(Antd) 来全局注册 Anti-Design-Vue 组件，之后在项目的任何地方都可以使用这些组件了。最后创建 Vue 实例并挂载到#app 元素上。

到这里，我们的开发环境就搭建好了，Anti-Design-Vue 也成功引入到项目中。接下来，就可以开始真正的学习之旅，探索 Anti-Design-Vue 各种强大组件的使用方法啦！

三、基础组件初体验

现在，我们已经站在了 Anti-Design-Vue 的大门前，接下来就正式进入这个丰富多彩的组件世界，先从一些基础组件入手，感受一下它的魅力和强大功能。

（一）Button 组件

Button 组件在网页中随处可见，是用户与页面交互的重要元素之一。Anti-Design-Vue 提供了多种类型的按钮，满足不同场景下的交互需求 。

先来看一下不同类型按钮的示例代码：

<template>

<div>

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

<a-button type="default">默认按钮</a-button>

<a-button type="dashed">虚线按钮</a-button>

<a-button type="danger">危险按钮</a-button>

<a-button type="link">链接按钮</a-button>

</div>

</template>

上述代码中，通过type属性来设置按钮的类型，展示效果如下：