Vue 3的Ant Design使用教程及实例

蚂蚁设计是一个开源的库，允许你创建有吸引力的、响应式的网站。如果你想使用一个经过良好测试且易于学习的框架，它是你下一个项目的绝佳选择。

另一方面，Vue.js是一个用于创建用户界面的渐进式框架。它的目的是简单易学，同时具有灵活性和可定制性。将这两者结合起来使用，可以使你比以前更快地创建响应式网站。

蚂蚁设计和Vue 3中包含的Composition API使得在编写有限的代码的同时创建漂亮的、响应性的和可扩展的应用程序变得简单。

在这个简短的指南中，我们将看看如何在Vue 3应用程序中使用ant-design-vue包，以及如何使用Ant图标系统:

• 开始使用
  • 创建一个新的Vue 3应用程序
  • 安装ant-design-vue
• 蚂蚁设计组件
• 表单处理
• 蚂蚁设计图标

开始使用

值得一提的是，这里描述的所有方法都适用于用Vue CLI和Vite生成的Vue 3项目。

创建一个新的Vue 3应用程序

让我们开始吧，运行以下命令来创建一个新的Vue 3应用程序。

vue create my-app
# OR Vite
npm init vue@3

如果你使用Vue CLI，请确保选择Vue 3作为你的首选预设，如下面的屏幕截图所示。

安装ant-design-vue

你可以通过下面的命令轻松地将ant-design-vue包添加到你的Vue 3项目中。

npm install ant-design-vue
# OR 
yarn add ant-design-vue

一旦安装完成，我们就可以开始在我们的项目中注册它了。

一种方法是在我们的项目中全局注册该包，这样我们就可以从任何地方引用其组件。这可以通过用下面的代码更新入口src/main.js 文件来实现。

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).mount("#app");

这样，我们就可以在我们的应用程序中开始使用它的组件，而不需要做任何额外的导入。

<!-- components/Sample.vue -->
<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
</template>

你也可以根据需要导入单个组件:

<!-- components/Sample.vue -->
<template>
  <div>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
  </div>
</template>

<script setup>
import { Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
</script>

正如你可能已经注意到的，我们也将Ant Design的CSS文件导入到这个单一的文件组件中，如果对我们所有的组件文件都做同样的事，那就没有意义了。为了解决这个问题，只需将Ant Design的CSS文件导入到src/main.js ，这样文件内容就会像这样:

import { createApp } from "vue";
import App from "./App.vue";

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

createApp(App).mount("#app");

为了避免做额外的导入，我们将假设在本文前面的代码示例中已经全局注册了ant-design-vue。

蚂蚁设计组件

蚂蚁设计组件包包括几个元素，如按钮、列表、卡片等等，它们都有不同的颜色和大小。图标也可以在主界面以及其他组件中利用。然而，让我们从探索基础知识开始，同时将自定义的Vue方法和反应式数据附加到它们身上。

<template>
  <div>
    <a-row>
      <a-col span="12">
        <div v-for="(alert, i) in alerts" :key="i">
          <a-alert
            :message="alert + ' message'"
            description="Lorem ipsum dolor sit amet."
            :type="alert"
          />
        </div>
      </a-col>
      <a-col span="12">
        <a-button type="primary" @click="message = 'Hello!'">
          {{ message }}
        </a-button>
        <a-skeleton avatar :paragraph="{ rows: 4 }" />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from "vue";

const alerts = ref(["success", "info", "warning", "error"]);
const message = ref("Click Me!");
</script>

上面的代码例子演示了如何使用Vue 3设置糖的语法来做一个简单的迭代，以及将自定义事件附加到ant-design-vue组件。我们开发了一个双列网格系统，第一列显示一个按钮和一个骨架加载器组件，而第二列基本上迭代了我们的警报数组，并使用它们的数据来渲染自定义警报组件。

如果我们运行我们的应用程序，我们会得到以下结果:

表单处理

处理表单数据是任何应用程序中必不可少的操作。下面是一个例子，说明如何使用ant-design-vue来创建一个基本的表单组件并处理其数据。

<template>
  <div>
    <a-form
      :model="formData"
      name="basic"
      autocomplete="off"
      @finish="onSubmit"
      @finishFailed="onError"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formData.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formData.remember">
          Remember me
        </a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">Continue</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const formData = ref({
  username: "",
  password: "",
  remember: true,
});

const onSubmit = async (_formData) => {
  console.log("Form Submitted!:", _formData);
  const response = await fetch("https://some.api/process-form", {
    method: "POST",
    body: _formData,
  });
};

const onError = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>

在上面的代码中，我们定义了一个反应式对象，formData ，其中有一些默认的空字符串，我们还使用了v-model 表单绑定，将这些数据与我们的ant-design-vue表单输入组件绑定。我们还创建了一个自定义函数onSubmit ，并将其附加到我们的ant-design-vue表单组件上，以提交我们的formData到一些假想的API进行处理，还有一个onError ，以处理在验证我们表单时发生的任何错误。

此外，这个代码样本显示了ant-design-vue组件中包含的自定义属性是如何简化表单的验证过程以及使其可访问的。

这是我们运行应用程序时，表单的输出结果:

如果你想在Vue 3中创建复杂的表单，你也应该阅读这篇关于v-model的文章。

蚂蚁设计图标

图标在使应用程序的设计更加丰富和吸引人方面起着重要作用。而Ant Design系统也意识到了这一点。

蚂蚁设计团队还开发了一个外部包，可以让你快速为你的应用程序添加丰富的图标，包括轮廓、实体，甚至是双色的图标。

你可以轻松地在你的Vue项目中安装这个图标包，用:

npm install @ant-design/icons-vue

下面是一个例子，说明我们是如何导入三种不同的火箭图标样式的:

<template>
  <div>
    <rocket-outlined />
    <rocket-filled />
    <rocket-two-tone two-tone-color="#eb2f96" />
  </div>
</template>

<script setup>
import {
  RocketOutlined,
  RocketFilled,
  RocketTwoTone,
} from "@ant-design/icons-vue";
</script>

而运行这段代码会产生以下结果:

为了增加额外的互动，我们还可以给任何图标应用一个自定义的旋转和转动属性。

<template>
  <div class="center">
    <rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
    <reload-outlined spin />
  </div>
</template>

<script setup>
import { RocketTwoTone, ReloadOutlined } from "@ant-design/icons-vue";
</script>

其结果如下:

结论

蚂蚁设计是一个出色的工具，可以用最小的努力创建一个网站。它是一个适应性很强的框架，允许你创建具有很大灵活性的简单网站。而在这篇文章中，我们看了如何在Vue 3中使用ant-design-vue包。我们还研究了如何使用ant-icon以及如何处理基本的表单提交。

ant-design-vue包的文档页面是学习所有提供的组件的一个很好的起点。