位置: IT常识 - 正文

如何在 Vue 3 中使用 Ant Design(vue3怎么样)

编辑:rootadmin
如何在 Vue 3 中使用 Ant Design

推荐整理分享如何在 Vue 3 中使用 Ant Design(vue3怎么样),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3的,vue3怎么用,vue3的,如何在vue3中使用jquery第三方插件,vue3怎么用,如何在vue3中使用jquery第三方插件,vue3怎么用,vue3技巧,内容如对您有帮助,希望把文章链接给更多的朋友!

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 应用程序:

vue 创建我的应用# 或者 Vitenpm 初始化vue@3

如果您使用的是 Vue CLI,请务必选择 Vue 3 作为您的首选预设,如下面的屏幕截图所示:

安装 ant-design-vue

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

npm 安装 ant-design-vue# 或者纱线添加 ant-design-vue

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

一种方法是在我们的项目中全局注册包,以便我们可以从任何地方引用它的组件。Bgsub在线抠图(bgsub.cn),原画抠图换背景免费保存,最高支持4096x4096分辨率!这可以通过src/main.js使用以下代码更新入口文件来实现:

从“vue”导入 { createApp };从“./App.vue”导入应用程序;​从“ant-design-vue”导入 Antd;导入“ant-design-vue/dist/antd.css”;​const app = createApp(App);app.use(Antd).mount("#app");

这样,我们就可以在我们的应用程序中开始使用它的组件,而无需进行任何额外的导入:

<!-- 组件/Sample.vue --><模板>  <a-button type="primary">主按钮</a-button>  <a-button>默认按钮</a-button>  <a-button type="dashed">虚线按钮</a-button></模板>如何在 Vue 3 中使用 Ant Design(vue3怎么样)

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

<!-- 组件/Sample.vue --><模板>  <div>    <Button type="primary">主按钮</Button>    <Button>默认按钮</Button>    <Button type="dashed">虚线按钮</Button>  </div></模板>​<脚本设置>从“ant-design-vue”导入{按钮};导入“ant-design-vue/dist/antd.css”;</脚本>

您可能已经注意到,我们还将 Ant Design CSS 文件导入到这个单一文件组件中,并且对我们所有的组件文件都做同样的事情是没有意义的。打包34款必备神器,全是电脑必装软件,系统优化办公有这些足够了!为了解决这个问题,只需将 Ant Design CSS 文件导入到src/main.js文件中,文件内容如下所示:

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

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

Ant Design 组件

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

<模板> <div>   <一行>     <a-col span="12">       <div v-for="(alert, i) in alerts" :key="i">         <警报           :message="警报 + '消息'"           description="Lorem ipsum dolor sit amet."           :type="警报"         />       </div>     </a-col>     <a-col span="12">       <a-button type="primary" @click="message = 'Hello!'">         {{ 信息 }}       </a-按钮>       <a-骨架头像 :paragraph="{ rows: 4 }" />     </a-col>   </a-row> </div></模板>​<脚本设置>从“vue”导入 { ref };​const alerts = ref(["success", "info", "warning", "error"]);const message = ref("点击我!");</脚本>

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

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

表单处理

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

<模板>  <div>    <a-form      :model="formData"      名称="基本"      自动完成=“关闭”      @finish="onSubmit"      @finishFailed="onError"    >      <一个表单项        标签="用户名"        名称="用户名"        :rules="[{ required: true, message: '请输入您的用户名!' }]"      >        <a-input v-model:value="formData.username" />      </a-form-item>​      <一个表单项        标签="密码"        名称="密码"        :rules="[{ required: true, message: '请输入您的密码!' }]"      >        <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">         记得我        </a-复选框>      </a-form-item>​      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">        <a-button type="primary" html-type="submit">继续</a-button>      </a-form-item>    </a-form>  </div></模板>​<脚本设置>从“vue”导入 { ref };​常量 formData = ref({ 用户名: ””, 密码: ””, 记住:真的,});​const onSubmit = async (_formData) => { console.log("表单提交!:", _formData); const response = await fetch("https://some.api/process-form", {   方法:“POST”,   正文:_formData, });};​常量 onError = (errorInfo) => { console.log("失败:", errorInfo);};</脚本>

在上面的代码中,我们定义了一个响应式对象,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 项目中安装图标包:

npm install @ant-design/icons-vue

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

<模板> <div> <火箭概述/> <装满火箭的/> <rocket-two-tone two-tone-color="#eb2f96" /> </div></模板><脚本设置>进口 { 火箭概述, 火箭填充, 火箭双音,} 来自“@ant-design/icons-vue”;</脚本>

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

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

<模板> <div class="center">   <rocket-two-tone two-tone-color="#eb2f96" :rotate="50" />   <reload-outlined spin /> </div></模板>​<脚本设置>从“@ant-design/icons-vue”导入 { RocketTwoTone, ReloadOutlined };</脚本>

这导致以下输出:

结论

Ant Design 是一款出色的工具,可以轻松创建网站。它是一个适应性很强的框架,允许您创建具有很大灵活性的简单网站。在整篇文章中,我们研究了如何在 Vue 3 中使用 ant-design-vue 包。我们还讨论了如何使用 ant-icon 以及如何处理基本的表单提交。

ant-design-vue 包的文档页面是了解所提供的所有组件的绝佳起点

本文链接地址:https://www.jiuchutong.com/zhishi/295999.html 转载请保留说明!

上一篇:CSS伪类选择器(css伪类选择器实例)

下一篇:在Vue中使用高德地图(vue调用高德js)

  • 联想小新怎么关机(联想小新怎么关闭防火墙)

    联想小新怎么关机(联想小新怎么关闭防火墙)

  • 怎么检查手机是否中了木马(怎么检查手机是不是翻新机)

    怎么检查手机是否中了木马(怎么检查手机是不是翻新机)

  • 苹果微信输入栏字体变小(苹果手机微信输入框大小调整)

    苹果微信输入栏字体变小(苹果手机微信输入框大小调整)

  • reno4屏幕多大(oppo reno4手机参数)

    reno4屏幕多大(oppo reno4手机参数)

  • excel表格里怎样快速求和(excel表格里怎样打两行字)

    excel表格里怎样快速求和(excel表格里怎样打两行字)

  • 手机传感器坏了有什么影响(手机传感器坏了是什么原因造成的)

    手机传感器坏了有什么影响(手机传感器坏了是什么原因造成的)

  • 华为mate30呼叫等待怎么设置(华为mate30手机呼叫等待怎么设置)

    华为mate30呼叫等待怎么设置(华为mate30手机呼叫等待怎么设置)

  • qq怎么恢复删除的好友(qq怎么恢复删除的好友和群)

    qq怎么恢复删除的好友(qq怎么恢复删除的好友和群)

  • mt762ch/a是什么型号的手机(mt762ch/a和mt742ch/a)

    mt762ch/a是什么型号的手机(mt762ch/a和mt742ch/a)

  • tplogincn管理员密码是多少(tplogincn管理员密码重置)

    tplogincn管理员密码是多少(tplogincn管理员密码重置)

  • qq设置聊天背景对方能看到吗(qq设置聊天背景怎么弄)

    qq设置聊天背景对方能看到吗(qq设置聊天背景怎么弄)

  • 手机号停机了还能收到短信验证码吗(手机号停机了还会继续扣月租吗)

    手机号停机了还能收到短信验证码吗(手机号停机了还会继续扣月租吗)

  • 华为p30可以升级5g吗(华为p30可以升级鸿蒙3吗)

    华为p30可以升级5g吗(华为p30可以升级鸿蒙3吗)

  • 苹果手机怎么卸载应用(苹果手机怎么卸载app软件)

    苹果手机怎么卸载应用(苹果手机怎么卸载app软件)

  • soul苹果下载不了(soul下载安装苹果)

    soul苹果下载不了(soul下载安装苹果)

  • 荣耀20yoyo怎么改名字(华为荣耀20yoyo可以改名字吗)

    荣耀20yoyo怎么改名字(华为荣耀20yoyo可以改名字吗)

  • 密友值是什么(密友值是啥)

    密友值是什么(密友值是啥)

  • 对比源照片不清晰怎么解决(对比源照片不清晰有解决的吗)

    对比源照片不清晰怎么解决(对比源照片不清晰有解决的吗)

  • 网易云怎么离线听音乐(网易云怎么离线听)

    网易云怎么离线听音乐(网易云怎么离线听)

  • 在高德地图上怎么创建位置(在高德地图上怎么设置不走高速)

    在高德地图上怎么创建位置(在高德地图上怎么设置不走高速)

  • xapple是什么牌子手机(pineapple)

    xapple是什么牌子手机(pineapple)

  • 抖音如何下载原视频(抖音如何下载原图片)

    抖音如何下载原视频(抖音如何下载原图片)

  • 快手怎么粘贴别人昵称(快手怎么粘贴别人昵称教程)

    快手怎么粘贴别人昵称(快手怎么粘贴别人昵称教程)

  • s10韩版区别(韩版s10 5g和国行s10 哪个好)

    s10韩版区别(韩版s10 5g和国行s10 哪个好)

  • 电脑开机欢迎界面卡住(电脑开机欢迎界面后黑屏只有鼠标)

    电脑开机欢迎界面卡住(电脑开机欢迎界面后黑屏只有鼠标)

  • conmgr.exe进程作用是什么 conmgr进程危险吗(conime进程太多)

    conmgr.exe进程作用是什么 conmgr进程危险吗(conime进程太多)

  • python中列表的索引如何理解?(python中列表的索引用法)

    python中列表的索引如何理解?(python中列表的索引用法)

  • java阻塞队列的两种操作(java阻塞队列线程安全吗)

    java阻塞队列的两种操作(java阻塞队列线程安全吗)

  • 2022个税手续费返还交增值税吗
  • 企业税收主要分为哪几类
  • 车船使用税会打折么
  • 房地产开发企业销售自行开发的房地产项目
  • 小额转款
  • 调整多计提所得税的分录
  • 餐费可以抵扣吗
  • 退货未开发票如何做账
  • 先抵扣后付款怎么做账
  • 公司没有发票的做内账,那么支付款从哪里来
  • 电子发票能不能作废重开
  • 免抵税额和免抵退税额有什么区别
  • 为什么销售人员佣金计入合同取得成本
  • 非企业单位有税收吗
  • 公司0转让要交哪些税
  • 应收账款质押账户被冻结
  • 公司买别人汇票有风险吗
  • win11 zen3
  • thinkphp6调用模型的方法
  • set up 和establish的区别
  • netsurf.exe - netsurf是什么进程 有什么用
  • lstm多对多
  • php array_chunk
  • PHP:zip_entry_compressedsize()的用法_Zip函数
  • php怎么创建项目
  • 商住房买卖过户流程
  • yii框架文档
  • 商业汇票抵付前欠货款的分录
  • java分页page类
  • vue环境搭建的几种方法
  • 应交税费下的科目设置
  • 工资计提未发放,调增还是调减
  • 高新技术产业企业认定
  • phpcms 用的是什么模板引擎
  • opencv python
  • 付了工资的资产负债表怎么填
  • 承兑汇票大回头是什么意思
  • 期权权利金的计算公式
  • 初级职称需要提交什么资料
  • 购买银行理财产品的几个必须知道
  • 融资租赁的会计处理方法举例子
  • 银行抵债资产如何更快处置
  • 专项存款可以放在什么科目
  • 本票包括哪些
  • 销售货物的价外费用如何开票
  • 发放职工薪酬的记账凭证
  • 计提工资的会计账务处理
  • 进项税额已抵扣又红字冲红税务系统自动冲回吗
  • 开了20万销项进项为0交多少税
  • win10系统微软
  • mac怎么自动清理垃圾软件
  • win7偶尔黑屏
  • win7密码输入错误被锁住
  • 苹果mac双系统怎么删除
  • svchosl.exe - svchosl是什么进程 有什么作用
  • xp系统组策略怎么打开
  • win8系统如何关闭防火墙
  • win7 win8 win8.1
  • windows进程太多
  • win8如何调屏幕亮度
  • unity怎么bake
  • c++ nops
  • android去掉状态栏第三方图标
  • react-router react-router-dom
  • 安卓录制音频
  • nodejs model
  • jquery filedownload
  • 离线安装驱动
  • linux echo echo
  • css li横向显示
  • 在javascript中什么方法可以对数组元素进行排序
  • jquery datatable服务端分页
  • python中的set方法
  • 辽宁省国税局网站
  • 黑龙江国税局官网
  • 苏州税务中心
  • 北京国税网上办税服务大厅
  • 防伪开票系统操作流程
  • 残疾人在国企有补贴吗
  • 纳税服务基本情况总结
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设