idea打开vant后操作

最新推荐文章于 2024-07-23 11:18:48 发布
最新推荐文章于 2024-07-23 11:18:48 发布
阅读量120 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77378763/article/details/138984781
版权

安装vant:7d43b6075f9240b193b1e8f4075da3aa.png

添加vant引用:

在src里main.js

892c6fc008dc48509ebed2d8354d220e.png 

添加这三个语句导包css这是把vant所有包都导入进来了不用再次导包了

vant官网2d37a3f3e8374d5a90343e6a532ca597.png 

然后启动项目

eab6a23ba2eb4cc881eb77c696a420fa.png 

浏览器打开后进入移动端按f12

4d22db3226434791960fed88ba00d2c6.png 

9507aa2779574040ae428be393da7c1e.png 

按钮组件

b99fa76a987e4b57882cc256ae3bd660.png

进入官网点击按钮组件复制

粘贴在项目

268cb82f1d17452797753f2318e481a6.png 

在home项目里添加按钮组件在template里的div里放进按钮组件

 选取一行按shift到最后一行防治拉过复制粘贴

                            定义路由

在router里的index.js里

15ebb0f31b3e42ee99d34fdb1cfb8d40.png

安装全国数据992fb059eb1344efb5e2e8a1604d8937.png 

 然后再项目里加入导包

 

爱学习的coco
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSD-2204-Vant-微服务-Spring Cloud-Day01
TheNewSystrm的博客
08-18 577
JSD-2204-Vant-微服务-Spring Cloud-Day01
【微服务】Day01（Vant、SpringCloud）
shortcutsuccess的博客
09-20 391
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZ2swusk-1663683660659)(image-20220428091647501-16583665374494.png)]Vant是一个轻量，可靠的移动端组件库，2017开源目前 Vant 官方提供了Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本。课程中我们使用Vue2版本对应的Vant学习微服务的概念是由Martin Fowler（马丁·福勒。
在IDEA中开发Vue项目时，引入Vant UI和Less
我与代码的故事
07-16 1655
一：前言 笔者最近在做一个商城类项目，运用到了有赞开发的适合商城项目的ui框架，还有Less（Css的扩展）。然后发现网上很少讲，于是笔者会引导大家在IDEA中通过命令行去引入Vant组件和Less。 操作环境：IDEA 2019.1.3 x64、@vue/cli 4.4.6。 二：操作 ①.首先大家能在Idea中运行Vue项目，nodejs和vue/cli应该都是准备好了。 为了大家下载速度更快，换npm为cnpm，国内的淘宝镜像快一点嘛。（换了请忽略，跳到下一步。） cmd弄出来黑窗口：因为有些人的电脑
什么是Vant? Spring Cloud Nacos注册中心
qq_54781283的博客
07-06 2639
Vant是一个轻量，可靠的移动端组件库，2017开源目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。课程中使用Vant 2.x版本可以浏览网站https://youzan.github.io/vant/v2/#/zh-CN/ElementUI是开发电脑浏览器页面的组件库而Vant是开发移动端显示页面的组件库酷鲨商城前台设计的是手机来访问，所以使用移动端更合适也就是使用Vant🚀 性能极佳，组件平均体积小于 1KB（min.
基于 SpringCloud + Vue 的硅谷课堂前后端分离微信公众号项目
Spring-_-Bear 的 CSDN 博客
11-04 1487
基于 SpringCloud + Vue.js 的硅谷课堂系统，是一款基于微信公众号 B2C 模式的在线学习平台，包含直播、教学与微信消息服务三大模块。包含后台管理系统和移动应用系统交互接口，平台支持直播、腾讯云视频点播、微信支付、微信授权登录、微信菜单、微信消息与腾讯云文件存储等一系列功能，为学员构建了一个全方位的在线学习平台。
前后端自学笔记
zhang20150615的博客
11-19 925
JavaWeb 依赖包 mysql驱动 (注意需要去掉runtime，否则报错) <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> 高性能缓存组件 <!--guava依赖包--> 本地缓存 <dependency> <groupId>com.goog
npm install 安装一直报错Error EPERM operation not permitted, mkdir
目标检测专栏持续更新中，改进YOLO系列通用，适用v5、v7、v8、所有博客均是团队原创博客，所有文章禁止转载，违者必究。
03-03 285
电脑重装系统后毛病不断，昨天刚弄完vue脚手架 今天在npm run serve启动项目的时候出错了…找来找去没找到问题，查了攻略兜兜转转，还把环境变量给配错了，然后不仅启动不了项目 还一直报错 Error: EPERM: operation not permitted, mkdir ‘D:Develop’ 没有权限操作巴拉巴拉，于是再又又又一次重装系统 打开黑窗口 使用npm命令仍旧是报错…无计可施几近抓狂之下 只能硬着头皮把报错内容贴在博客上，终于翻阅了好多解决办法，才找到一位大佬的解决方案，解决了这该
使用Axios前后端交互（超详细）建议点赞收藏
qq_45310795的博客
12-08 6127
使用Axios前后端交互（超详细）建议点赞收藏
【项目实战】智子商城开发文档：springboot+vue前后端分离B2B单体项目
热门推荐
roydon
12-25 1万+
前后端分离包含后台
vant自定义二级菜单操作
01-18
（1）组件解释： 本组件是为了解决二级联动的效果编写的，这里使用了省份和城市分开的效果，具体展示效果，可以参考下面。 （2）组件代码： <button @click=showM>{{ value || 选择省份 }}<...
Vant picker 多级联动操作
01-18
官网地址：链接 官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。 度娘也没有找到，花了大半天爬坑试错。 搭配弹出层使用 选择城市 value=station click=showPicker> ...van-picker show-toolbar :...
vantUI 获得piker选中值的自定义ID操作
01-21
vantUI官网：picker 官网例子 export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onChange(picker, value, index) { console.log('当前值'+value...
vant-ui组件调用Dialog弹窗异步关闭操作
01-18
我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回...
vant侧边导航栏SideBar
07-03
4. **选中状态反馈**：SideBar会自动根据路由或用户操作显示当前选中的菜单项，提供清晰的用户反馈。 5. **自定义事件**：提供点击菜单项时的`click`事件，方便开发者进行业务逻辑处理。 6. **可扩展性**：可以通过...
Vue使用FullCalendar实现日历/周历/月历
最新发布
_小郑有点困了的博客
07-23 176
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 965
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 108
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
vant idea 订单页面布局
07-16
为了提高用户体验，Vant idea 订单页面布局通常会提供商品的相关操作，例如删除、修改数量等。 4. 地址和配送信息：这个区域用于展示订单的配送地址和相关信息。用户可以在这里查看、修改或添加配送地址，并选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值