4-5 集成Ant Design Vue

最新推荐文章于 2024-08-21 23:06:58 发布
最新推荐文章于 2024-08-21 23:06:58 发布
阅读量426 收藏
点赞数
分类专栏： SpringBoot 文章标签： vue.js bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunweikai123/article/details/123137525
版权
本文介绍了如何在Vue项目中集成Ant Design Vue。首先提到了三种创建UI界面的方法，包括原生开发、使用Bootstrap（需要jQuery）和基于Vue的UI组件。接着详细讲述了采用Vue UI组件的方式，特别是安装和配置Ant Design Vue的过程，并在Home页面添加了一个危险按钮。启动项目后，显示了集成效果。
摘要由CSDN通过智能技术生成

UI界面

方法一：基于原生的html，css，js。

方法二：基于第三方css库，如bootstrap。但是有些组件要求引入jQuery。

方法三：基于Vue 的 UI 组件。

Vue UI组件用法相通。

安装 ant design vue，执行以下命令。

npm install ant-design-vue@2.0.0-rc.3 --save

安装成功。

下面引入，在main.ts里加配置。

 在home页面添加一个danger按钮

 启动后结果：

 

孤注一掷 、
关注
专栏目录
【vue 后台管理模板 ranAdmin 支持ant-design/ant-design/electron-plus/electron-plus-electron】
ranshakalove的博客
01-12 1750
vue 后台管理模板 支持ant-design/ant-design/electron-plus/electron-plus-electron
vue集成ant-design-vue
归小超博客
12-08 1491
vue 集成 ant-design-vue
【Vue3】集成 Ant Design Vue
最新发布
又言又语
08-21 516
本文介绍 Vue3 集成 Ant Design Vue 的方法步骤。Ant Design 是蚂蚁集团和 Ant Design 开源社区推出的一套基于 React 的 UI 设计语言和组件库，适用于企业级中后台产品。Ant Design Vue 是基于 Ant Design 和 Vue 技术栈的实现。本文只介绍了全局完整注册 Ant Design Vue 的方法，适用于对打包文件大小不敏感的场景，除此外还可以全局部分注册和局部注册组件，参考官方文档。
vue+Ant Design vue
weixin_49739911的博客
03-02 745
vue+Ant Design vue，vue动态数据
Vue 2集成Ant Design步骤
晓果博客
06-06 497
这样，您就成功将Ant Design集成到Vue 2项目中了。您可以根据需要在其他组件中引入和使用Ant Design的组件。
基于springboot，ant-design-vue-pro的简易后台管理系统.zip
02-24
标题中的“基于SpringBoot，ant-design-vue-pro的简易后台管理系统”揭示了这个项目的核心技术栈，主要包括两个部分：SpringBoot后端框架和ant-design-vue-pro前端UI库。接下来，我们将深入探讨这两个关键技术以及...
antd-vue-admin:该项目采用ant-design-vue作为UI框架，配备管理系统常用功能集成
05-06
antd-vue-admin 安装项目依赖 yarn or npm install 编译启动 yarn dev 编译打包 yarn build 测试代码 yarn test:unit 代码格式化 yarn lint -- --fix Customize configuration See .
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
02-23
Vue CLI 3是Vue.js官方提供的一个快速脚手架工具，它简化了项目的初始化和配置过程，而Ant Design Vue则是一个基于Vue.js的高质量前端组件库，灵感来源于Ant Design设计体系。 首先，让我们了解Vue CLI 3。Vue CLI ...
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
Electron-Vue + Ant desigin vue
Mu_Soul的博客
05-09 888
cd vue项目：cd app_name 安装环境： npm i --save ant-design-vue main.js中 import ‘anti’ from ‘anti-desigin-vue’ Vue.use(anti)
electron elctron-vue集成antd设置按需加载
weixin_43294560的博客
09-12 625
1、下载 cnpm install ant-design-vue --save cnpm install babel-plugin-import --save 2、按需加载 在.babelrc文件中的最后plugins内添加 ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件(先下载less编译器) 3、使用方式
基于vue实现电子签名组件
贝贝小菜鸟的博客
02-02 1056
1.安装依赖 npm intsall vue-esign -s 2.在main.js中引入组件 import vueEsign from 'vue-esign' 3.封装组件 <!-- * @Author: * @Date: 2021-02-02 * @LastEditTime: 2021-02-02 * @LastEditors: Please set LastEditors * @Description: 电子签名 * @FilePath: --> <templa
前端组件之Bootstrap与Ant design of Vue
程序员三木的博客
10-28 6211
架构1、前言2、Bootstra跟Ant design对比2.1 简介2.1.1 Bootstrap2.1.2 Ant design2.2 特性2.2.1 Bootstrap2.2.2 Ant Design Of Vue2.3 入门条件BootstrapAnt Design Of Vue2.4 部分组件的显示效果以及代码2.4.1 导航条2.4.2 巨幕2.5 栅格系统3、两个强大组件库的一些共性总而言之 1、前言 本文仅面向前端初始学习者，当然也欢迎大犇来指正其中错误 玩前端的新手，或多或少地会见过并
bootstrap 和 ant design css样式 冲突 导致图标移位
言小溪 的博客
02-12 645
/** bootstrap 和 ant design 冲突，导致图标移位 */ body .anticon { transform: translate(-0.5px, -3px); }
vue+Ant design vue做项目
热门推荐
Jone's Area
09-23 6万+
哈喽哈喽，这期带来蚂蚁金服的一个Ant Design 的 Vue 实现。 样式还是很现代化的，嗯...现在是2019年9月17，对现在来说还很fashion过几年就不知道了。 话不多说直接上手，喜欢记得关注，顺手右上角来个赏我两个大手赞，让我体验笑出个猪叫声一下。 正文 要做这种样式，我们一般在项目中全局引入一下，类似的还有reqwest这种http方法。 反正就是常用的组件都在...
laravel 使用 vue 及 Ant-design-vue 依赖（Laravel5.6+Vue+Ant-design-vue集成搭建）
芥焉丶丶的博客
05-18 2246
我们可以看一下app.js的代码，发现他是引入了vue，然后注册了一个组件，也就时Example.vue , Example.vue 中输出两句话，这是一个完整的组件，我们可以直接使用。 我们找到resources\views\welcome.blade.php 文件，将其修改为下面的代码，也就是吧原来的HTML删了，添加一个id为app的div，在其中使用app.js 中注册的组件，需要注意的就是要添加crsf-Token的验证meta标签，和引入 app.js 文件，这个js文件也可以去根目录中的 .
ant-design-vue UI组件使用讲解
06-10
通过jeecg-boot项目实战，详细介绍 ant-design-vue UI组件使用，细致的讲解每个组件的用法，教你学会如何看ant-design-vue的官方文档。对于初学入门者来讲，非常实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值