如何在 Vue 3 中利用 Ant Design

Ant Design 是一个开源库，可让您创建吸引人的响应式网站。假如您想利用颠末充实测试且易于学习的框架，那么它是您下一个项目标绝佳选择。
另一方面，Vue.js 是一个用于创建用户界面的渐进式框架。它旨在易于学习，同时具有灵活性和可定制性。将这两者团结利用可以让您比以往更快地创建响应式网站。
Ant Design 和 Vue 3 中包含的 Composition API 使得在编写有限代码的同时创建雅观、响应敏捷且可扩展的应用步伐变得简单。
在这个简短的指南中，我们将相识如何在 Vue 3 应用步伐中利用 ant-design-vue 包以及如何利用 Ant 图标系统。

• 入门
  
  
  
  • 创建一个新的 Vue 3 应用步伐
    
  • 安装 ant-design-vue
    
  
  
• Ant Design 组件
  
• 表单处置惩罚
  
• 蚂蚁计划图标
  

入门

还值得一提的是，这里描述的全部方法都实用于利用 Vue CLI 和 Vite 天生的 Vue 3 项目。
创建一个新的 Vue 3 应用步伐

让我们开始运行以下下令来创建一个新的 Vue 3 应用步伐：

1. vue 创建我的应用
2. # 或者 Vite
3. npm 初始化vue@3

复制代码

假如您利用的是 Vue CLI，请务必选择 Vue 3 作为您的首选预设，如下面的屏幕截图所示：

安装 ant-design-vue

您可以利用以下下令轻松地将 ant-design-vue 包添加到您的 Vue 3 项目中：

1. npm 安装 ant-design-vue
2. ＃ 或者
3. 纱线添加 ant-design-vue

复制代码

一旦安装完成，我们就可以开始在我们的项目中注册它了。
一种方法是在我们的项目中全局注册包，以便我们可以从任何地方引用它的组件。Bgsub在线抠图(bgsub.cn)，原画抠图换配景免费保存，最高支持4096x4096分辨率！这可以通过src/main.js利用以下代码更新入口文件来实现：

1. 从“vue”导入 { createApp }；
2. 从“./App.vue”导入应用程序；
3. ​
4. 从“ant-design-vue”导入 Antd；
5. 导入“ant-design-vue/dist/antd.css”；
6. ​
7. const app = createApp(App);
8. app.use(Antd).mount("#app");

复制代码

如许，我们就可以在我们的应用步伐中开始利用它的组件，而无需举行任何额外的导入：

1. <!-- 组件/Sample.vue -->
2. <模板>
3.  <a-button type="primary">主按钮</a-button>
4.  <a-button>默认按钮</a-button>
5.  <a-button type="dashed">虚线按钮</a-button>
6. </模板>

复制代码

您还可以按需导入单个组件：

1. <!-- 组件/Sample.vue -->
2. <模板>
3.  <div>
4.    <Button type="primary">主按钮</Button>
5.    <Button>默认按钮</Button>
6.    <Button type="dashed">虚线按钮</Button>
7.  </div>
8. </模板>
9. ​
10. <脚本设置>
11. 从“ant-design-vue”导入{按钮}；
12. 导入“ant-design-vue/dist/antd.css”；
13. </脚本>

复制代码

您大概已经注意到，我们还将 Ant Design CSS 文件导入到这个单一文件组件中，并且对我们全部的组件文件都做同样的事变是没有意义的。打包34款必备神器，满是电脑必装软件，系统优化办公有这些富足了！为相识决这个题目，只需将 Ant Design CSS 文件导入到src/main.js文件中，文件内容如下所示：

1. 从“vue”导入 { createApp }；
2. 从“./App.vue”导入应用程序；
3. ​
4. 导入“ant-design-vue/dist/antd.css”；
5. ​
6. createApp(App).mount("#app");

复制代码

为避免举行额外的导入，我们假设 ant-design-vue 已在本文前面的代码示例中全局注册。
Ant Design 组件

Ant Design 组件套件包罗几个元素，如按钮、列表、卡片等等，它们都有不同的颜色和巨细。图标也可以在主界面以及其他组件中利用。河马视频App，免登录影视追剧丝滑看片，已解锁会员稳固无广告观影！但是，让我们开始探索底子知识，同时将自界说 Vue 方法和响应式数据附加到它们：

1. <模板>
2.   <div>
3.    <一行>
4.      <a-col span="12">
5.        <div v-for="(alert, i) in alerts" :key="i">
6.          <警报
7.            :message="警报 + '消息'"
8.            description="Lorem ipsum dolor sit amet."
9.            :type="警报"
10.          />
11.        </div>
12.      </a-col>
13.      <a-col span="12">
14.        <a-button type="primary" @click="message = 'Hello!'">
15.          {{ 信息 }}
16.        </a-按钮>
17.        <a-骨架头像 :paragraph="{ rows: 4 }" />
18.      </a-col>
19.    </a-row>
20.   </div>
21. </模板>
22. ​
23. <脚本设置>
24. 从“vue”导入 { ref }；
25. ​
26. const alerts = ref(["success", "info", "warning", "error"]);
27. const message = ref("点击我！");
28. </脚本>

复制代码

上面的代码示例演示了如何利用 Vue 3 设置糖语法举行简单的迭代以及将自界说事件附加到 ant-design-vue 组件。我们开发了一个双列网格系统，此中第一列表现一个按钮和一个骨架加载器组件，而第二列根本上遍历我们的警报数组并利用它们的数据来出现自界说警报组件。
假如我们运行我们的应用步伐，我们将得到以下结果：

表单处置惩罚

处置惩罚表单数据是任何应用步伐中必不可少的操作。下面是一个如何利用 ant-design-vue 创建根本表单组件并处置惩罚其数据的示例：

1. <模板>
2.  <div>
3.    <a-form
4.      :model="formData"
5.      名称="基本"
6.      自动完成=“关闭”
7.      @finish="onSubmit"
8.      @finishFailed="onError"
9.    >
10.      <一个表单项
11.        标签="用户名"
12.        名称="用户名"
13.        :rules="[{ required: true, message: '请输入您的用户名！' }]"
14.      >
15.        <a-input v-model:value="formData.username" />
16.      </a-form-item>
17. ​
18.      <一个表单项
19.        标签="密码"
20.        名称="密码"
21.        :rules="[{ required: true, message: '请输入您的密码！' }]"
22.      >
23.        <a-input-password v-model:value="formData.password" />
24.      </a-form-item>
25. ​
26.      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
27.        <a-checkbox v-model:checked="formData.remember">
28.          记得我
29.        </a-复选框>
30.      </a-form-item>
31. ​
32.      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
33.        <a-button type="primary" html-type="submit">继续</a-button>
34.      </a-form-item>
35.    </a-form>
36.  </div>
37. </模板>
38. ​
39. <脚本设置>
40. 从“vue”导入 { ref }；
41. ​
42. 常量 formData = ref({
43.   用户名： ””，
44.   密码： ””，
45.   记住：真的，
46. });
47. ​
48. const onSubmit = async (_formData) => {
49.   console.log("表单提交！:", _formData);
50.   const response = await fetch("https://some.api/process-form", {
51.    方法：“POST”，
52.    正文：_formData，
53.   });
54. };
55. ​
56. 常量 onError = (errorInfo) => {
57.   console.log("失败：", errorInfo);
58. };
59. </脚本>

复制代码

在上面的代码中，我们界说了一个响应式对象，formData带有一些默认的空字符串，我们还利用v-model表单绑定将此数据绑定到我们的 ant-design-vue 表单输入组件。我们还创建了一个自界说函数onSubmit并将其附加到我们的 ant-design-vue 表单组件，以将我们的 formData 提交给一些虚构的 API 举行处置惩罚，以及一个onError用于处置惩罚在验证表单时发生的任何错误的函数。
别的，此代码示例还展示了 ant-design-vue 组件中包含的自界说属性如何简化表单验证过程并使其可访问。

---

高出 20 万开发人员利用 LogRocket 来创造更好的数字体验相识更多 →

---

以下是我们运行应用步伐时表单的输出：

假如你想在 Vue 3 中创建复杂的表单，你还应该阅读这篇关于 v-model 的文章。
蚂蚁计划图标

图标在使应用步伐计划更加丰富和有吸引力方面发挥着告急作用。Ant Design 系统是有意识的。
Ant 计划团队还开发了一个外部包，可让您快速向应用步伐添加丰富的图标，包罗表面、实体以致双色调图标。
你可以很容易地在你的 Vue 项目中安装图标包：

1. npm install @ant-design/icons-vue

复制代码

这是我们如何导入三种不同的火箭图标样式的示例：

1. <模板>
2.   <div>
3.     <火箭概述/>
4.     <装满火箭的/>
5.     <rocket-two-tone two-tone-color="#eb2f96" />
6.   </div>
7. </模板>
9. <脚本设置>
10. 进口 {
11.   火箭概述，
12.   火箭填充，
13.   火箭双音，
14. } 来自“@ant-design/icons-vue”；
15. </脚本>

复制代码

运行此代码会产生以下结果：

要添加额外的交互，我们还可以将自界说旋转和旋转属性应用于任何图标。

1. <模板>
2.   <div class="center">
3.    <rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />
4.    <reload-outlined spin />
5.   </div>
6. </模板>
7. ​
8. <脚本设置>
9. 从“@ant-design/icons-vue”导入 { RocketTwoTone, ReloadOutlined }；
10. </脚本>

复制代码

这导致以下输出：

结论

Ant Design 是一款精彩的工具，可以轻松创建网站。它是一个顺应性很强的框架，允许您创建具有很大灵活性的简单网站。在整篇文章中，我们研究了如何在 Vue 3 中利用 ant-design-vue 包。我们还讨论了如何利用 ant-icon 以及如那里理根本的表单提交。
ant-design-vue 包的文档页面是相识所提供的全部组件的绝佳出发点

来源：https://blog.csdn.net/weixin_47967031/article/details/127444846
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！