位置: 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)

  • 企业为什么要选择网络营销(企业为什么要选址)

    企业为什么要选择网络营销(企业为什么要选址)

  • 淘宝id是账号还是昵称(淘宝id就是淘宝账号吧)

    淘宝id是账号还是昵称(淘宝id就是淘宝账号吧)

  • 笔记本电脑显示屏横过来了怎么调正(笔记本电脑显示NO BOOTABLE DEVICE)

    笔记本电脑显示屏横过来了怎么调正(笔记本电脑显示NO BOOTABLE DEVICE)

  • 什么软件可以换照片背景呢(什么软件可以换证件照底色)

    什么软件可以换照片背景呢(什么软件可以换证件照底色)

  • mp3文件格式不支持怎么办(mp3文件格式不支持打开)

    mp3文件格式不支持怎么办(mp3文件格式不支持打开)

  • 红米手机16g怎么变64g(红米手机怎么扩大存储空间)

    红米手机16g怎么变64g(红米手机怎么扩大存储空间)

  • 苹果6s plus怎么设置小圆点(苹果6s plus怎么刷机)

    苹果6s plus怎么设置小圆点(苹果6s plus怎么刷机)

  • 抖音号能改几次(抖音号可以修改几次?)

    抖音号能改几次(抖音号可以修改几次?)

  • 资源管理器未响应怎么办(资源管理器未响应是什么原因)

    资源管理器未响应怎么办(资源管理器未响应是什么原因)

  • 钉钉普通群和班级群的区别(钉钉的班级群和师生群的区别)

    钉钉普通群和班级群的区别(钉钉的班级群和师生群的区别)

  • 苹果11微信发语音没声音(苹果11微信发语音显示时间太短)

    苹果11微信发语音没声音(苹果11微信发语音显示时间太短)

  • 充电器电流调节是什么意思(电动三轮充电器电流调节)

    充电器电流调节是什么意思(电动三轮充电器电流调节)

  • 为什么来电没有声音(为什么来电没有显示)

    为什么来电没有声音(为什么来电没有显示)

  • 为什么有的信息发送不出去(为什么有的信息显示送达有的不显示)

    为什么有的信息发送不出去(为什么有的信息显示送达有的不显示)

  • 电脑显示器插在主机哪里(电脑显示器插在主板上没信号)

    电脑显示器插在主机哪里(电脑显示器插在主板上没信号)

  • 段后间距20磅怎么设置(段间距20磅怎么设置)

    段后间距20磅怎么设置(段间距20磅怎么设置)

  • oppor9应用加密在哪里取消(oppor9手机应用加密)

    oppor9应用加密在哪里取消(oppor9手机应用加密)

  • vivox21是闪充吗(vivox21的闪充功能在哪里开启)

    vivox21是闪充吗(vivox21的闪充功能在哪里开启)

  • 苹果备忘录背景怎么换(苹果备忘录背景颜色怎么调)

    苹果备忘录背景怎么换(苹果备忘录背景颜色怎么调)

  • 京东消息提醒怎么取消(京东消息提醒怎么关掉)

    京东消息提醒怎么取消(京东消息提醒怎么关掉)

  • 苹果11pro后面是玻璃吗(苹果11pro后面是什么材质)

    苹果11pro后面是玻璃吗(苹果11pro后面是什么材质)

  • 怎么删掉抖音作品(怎么删掉抖音作品结尾视频)

    怎么删掉抖音作品(怎么删掉抖音作品结尾视频)

  • 苹果手机录像有暂停功能吗(苹果手机录像有哒哒哒的声音)

    苹果手机录像有暂停功能吗(苹果手机录像有哒哒哒的声音)

  • 跳龙门体验金怎么用(跳龙门体验金怎么领)

    跳龙门体验金怎么用(跳龙门体验金怎么领)

  • nova5pro电池容量(nova5pro手机电池容量)

    nova5pro电池容量(nova5pro手机电池容量)

  • Windows11怎么查询tpm版本?Windows11查询tpm版本教程(windows11怎么查询激活时间)

    Windows11怎么查询tpm版本?Windows11查询tpm版本教程(windows11怎么查询激活时间)

  • 织梦dedecms自定义输出移动版上一篇下一篇文章(织梦自定义字段)

    织梦dedecms自定义输出移动版上一篇下一篇文章(织梦自定义字段)

  • phpcms hash验证失败怎么办(php验证码代码怎么写)

    phpcms hash验证失败怎么办(php验证码代码怎么写)

  • 服装业增值税专用发票税率
  • 出租房屋确认收入列简易计税还是销项税
  • 中小企业开业税务登记所需资料
  • 当月发票开错了已经红冲怎么做分录?
  • 收到承兑汇票怎么兑现步骤
  • 预付了订金收到发票怎么做分录?
  • 微信支付工资怎么做账
  • 关于公司食堂的文案
  • 如何选一般纳税人还是小规模纳税人合作?
  • 330税盘费是什么意思?
  • 企业自主招聘有编制吗
  • 其他综合收益是什么类科目
  • 借其他应收贷应付
  • 港杂费是由谁收取
  • 企业所得表怎么填写
  • 委托个人加工应税消费品纳税地点
  • 员工报销现在用什么软件
  • 出口销售收入记账方法有哪些?
  • 工资五险一金缴费标准是多少
  • 收到的产品返利怎么做账
  • 公司购买的机票赔偿可以退公司嘛
  • 关闭自动更新应用程序
  • 这张磁盘有写保护无法格式化
  • php socket函数
  • 合作社实际没有自产自销,但税务方面怎么可以提供证明
  • php current
  • 职工医疗保险补交6万与交居民每交300哪个合算?
  • 材料委托加工
  • Chat GPT实用案例——VUE+Chat GPT实现聊天功能教程
  • 2023前端面试题百度云
  • 企业的存货按照计划成本核算,期初
  • 考研408怎么样
  • 企业资产损失税前扣除管理办法最新
  • 所有者权益合计等于什么
  • 法人想从公司户提钱自己用有事吗
  • springsecurity有什么用
  • 应交税费明细账登记图
  • 归还股东借款要交税吗
  • 汇算清缴补缴所得税摘要怎么写的
  • 进项税额红字
  • 一般纳税人收到的普票可以抵扣吗
  • 税务师报名条件和要求
  • 应收账款全额计提的条件
  • 保修期间免费提车可以吗
  • 营改增后服务业账务处理
  • 当月费用次月报销
  • 会计处理的步骤
  • 年底本年利润结转错了怎么调
  • 单独入账的土地为啥不提折旧
  • 企业研发费用包括工资支出吗
  • 在建工程的消防要求
  • 未收到发票暂估分录
  • 车辆购置税是怎么计算的
  • 公司缴纳社保如何转为个人缴纳
  • 年末增值税有留底,挂在哪个科目
  • 班车租赁发票税率是多少
  • 自动化收集落料
  • mysql建索引有哪些策略和原则
  • ubuntu启动菜单 哪个键
  • linux所谓的free
  • macos 备份
  • xp系统 修复
  • win8.1怎么用
  • centos部署django项目
  • win7怎么看电脑ip地址
  • 在linux操作系统中
  • 中小型企业的认定标准2023
  • unity alembic
  • node.js怎么用
  • 在github开源的项目有假的吗
  • cocos2dx小游戏
  • unity图集
  • [置顶]游戏名:chivalry2
  • 使用BMFont+NGUI利用图片制作自定义字体
  • python批量执行命令
  • python中chr(ord())
  • 我们要什么行政执法监督机制和能力建设严格落实行政
  • 山东2022新生儿数量统计表
  • 监理费合同按什么计算
  • 刚出生的宝宝身长多少正常
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设