VUE Vant移动端开发

最新推荐文章于 2024-09-15 13:06:11 发布
最新推荐文章于 2024-09-15 13:06:11 发布
阅读量1.9k 收藏 4
点赞数 1
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73849581/article/details/128413376
版权
本文介绍了Vant组件库，包括其定义、优势和特性。接着，通过创建Vue项目、安装Vant支持、添加引用，逐步展示如何进行移动端开发。详细讲解了使用Vant的按钮组件、表单页面和area省市区选择的实现过程，提供了实操指导。
摘要由CSDN通过智能技术生成

Vant

什么是Vant

Vant是一个轻量，可靠的移动端组件库，2017开源

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

课程中我们使用Vue2版本对应的Vant学习

[https://youzan.github.io/vant/v2/#/zh-CN/]

Vant的优势

ElementUI是开发计算机浏览器(非移动端)页面的组件库

而Vant是开发移动端页面的组件库

我们设计的酷鲨商城前台项目使用手机\移动设备访问的,所以使用Vant更合适

Vant特性

  • 🚀性能极佳，组件平均体积小于 1KB（min+gzip）
  • 🚀 65+ 个高质量组件，覆盖移动端主流场景
  • 💪 使用 TypeScript 编写，提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%，提供稳定性保障
  • 📖 提供完善的中英文文档和组件示例
  • .......

第一个Vant程序

创建Vue项目

参考第四阶段创建Vue项目的步骤,创建Vue项目

首先确定一个要创建项目的文件夹

例如在E盘下创建vue-home文件夹

进入文件夹,在地址栏输入cmd 打开dos命令行界面

E:\vue-home>vue create demo-vant

创建时具体选项,参照之前四阶段的笔记即可

下面我们就可以用idea打开我们创建的项目了

安装Vant支持

我们创建的Vue项目并不会默认就支持Vant

所以,我们需要安装Vant的支持到Vue项目中

在打开的idea界面最下方,找到

最低0.47元/天 解锁文章
半路出家不会英语
关注
Vant组件使用
qq_54030660的博客
04-29 1075
组件的安装 # Vue 3 项目，安装最新版 Vant npm i vant # Vue 2 项目，安装 Vant 2 npm i vant@latest-v2 查看vue的版本，在根目录的 package.js里面 "dependencies": { "core-js": "^3.8.3", "vant": "^2.12.47", "vue": "^2.6.14", //这个是版本 "vue-router": "^3.5.1" }, 组件的引.
vue中Vant的使用
ddf__的博客
11-06 508
引入完成之后就可以在需要的组件页面中加入组件了。在不使用插件的情况下，可以手动引入需要的组件。在main.js中引入vant组件库。
如何使用Vue框架开发移动端应用？
最新发布
alankuo的专栏
09-15 571
总之，使用 Vue 框架开发移动端应用需要掌握 Vue 的基本语法和开发模式，同时了解移动端开发的特点和需求。同时，也可以使用一些移动端调试工具，如微信开发者工具、VConsole 等，来调试在手机上运行的应用。- 将打包后的代码部署到服务器上，可以使用静态文件服务器（如 Nginx）或者云服务提供商（如阿里云、腾讯云等）进行部署。- 对于移动端应用，还需要考虑触摸事件的处理，如滑动、缩放等。- 例如，可以创建一个头部组件、一个底部导航组件、一个内容组件等，然后在页面中组合这些组件。
vue移动端单页面开发模板
08-10
基于 vue2.0 写的单页面应用 Vue.js 中文社区
使用 vue + vant 开发移动端网页
MFWSCQ的博客
09-20 852
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有 css 属性的属性的单位都进行转化，除了 letter-spacing 的。移动端开发的时候我们通常需要进行适配，比如设计图宽度是 750px 我们为了适应不同的设备，需要将我们设计图上的 px 转为 视口单位 vw。这里我们采用 postcss-px-to-viewport。新建 postcss.config.js。
vue移动端开发
weixin_41978174的博客
07-23 713
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面和单页应用。它在移动端开发中也表现得非常出色，特别是在与一些移动端优化技巧和工具结合使用时。
Vue--移动端开发
郑怪兽
08-23 2498
移动端开发 我们现在关注的点还在移动M站上，或者我们可以叫做webapp，其实就是运行在移动端浏览器中的web网站。 app:application应用程序。 手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。 移动端开发是与PC端肯定是有很大不同的，所以我们需要学习如何在移动设备上开发完美适配的app 开发移动端应用我们需要学习的知识点可以分成如下几个： 移动端布局适配 移动端事件 移动端交互效果 移动端前端框架 移动端调试 移动端布局适配 从屏幕尺寸、屏幕类型
vue 和 vant移动端项目开发
qq_38686150的博客
09-05 372
统一处理页面访问权限 在路由meta字段中配置 需要登录的子段 页面在跳转时 在全局钩子根据该字段进行判断 没有登录next(false) 弹窗 扩展 小程序购物车没有登录会显示 未登录的页面 点击按钮跳转登录页 获取手机号进行登录 。。。。待续 ...
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码.zip
05-05
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作...
Vant移动端组件库 v3.0.0
12-28
为您提供Vant移动端组件库下载，Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按...
vue+vant面试题库移动端.zip
10-04
"vue+vant面试题库移动端"是一个针对Vue.js和Vant技术栈的求职者准备的面试资源集合，旨在帮助他们更好地应对面试，提升在移动应用开发领域的专业技能。 面试题库通常包括多个方面，如Vue.js的基础概念、核心特性、...
vue框架移动端开发入门指南
10-30
vue框架移动端开发入门指南vue框架移动端开发入门指南
基于vue构建的大型单页面应用移动端开发
08-12
基于vue构建的大型单页面应用-移动端开发 包括购物车的项目，项目涉及到对money的逻辑计算。 涉及 ES6 等新属性
vue+vant搭建移动端框架(2)
2401_84438067的博客
04-29 980
插件功能: https://vuex.vuejs.org/zh/guide/plugins.html实现效果: 页面在数据加载完成前展示loading实现思路:vuex中注册一个管理loading的module,通过绑定异步的action，将每个action的loading存在vuex中，这样我在每个页面只需要在vuex的store中拿相对应的action loading就能达到此目的在src目录下新建utils目录，在utils目录下再新建vuex-loading.jsstate:{
移动端web开发初探之Vuejs的简单实战
weixin_34008784的博客
01-14 1075
这段时间在做的东西，是北邮人论坛APP的注册页。这个注册页是内嵌的网页，因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。 DEMO的github地址在这里 内容提要： meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探 meta标签 这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的...
小满Vue3第三十六章（Vue如何开发移动端）
热门推荐
qq1195566313的博客
06-30 2万+
开发移动端最主要的就是适配各种手机，为此我研究了一套解决方案在之前我们用的是rem 根据HTML font-size 去做缩放现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1.安装依赖 因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件vite.config.ts 如果你用的vite 是 ts 他这个插件并没有提供声明文件我已经帮大家写好了声明文件（良心） 引入声明
Vue移动网页开发调试过程（第二篇）——weinre
qq_38948398的博客
04-30 540
目录 工具介绍：weinre 安装开启 开始调试 前言：前面一篇主要讲的是视图层面上的同步预览效果，这一篇的内容涉及就是像PC端一样调试css和js以及捕捉接口请求 工具介绍：weinre 百度搜索关键词weinre，就可以看到如下信息 可以看到第一页的内容都是关于这个工具的介绍，所以从此可见这个工具的调试方案还是比较OK的。 因为从百度检索中可以看到关于这个工具介绍的最新一篇博客都是18年的，距今对于我们开发人员也算是就远了，所以这里我对使用这个依赖工具过程从头到尾梳理了一下 安
vue页面手机端开发总结
mx_is_bang的博客
05-29 4445
当图片的某元素是一张图片，可不设置宽高，将样式设置为如下，这样图片就会撑起来页面，避免一些宽高在不同机型不协调的问题。 display: block; width: 100%; 需要条件判断显示不同的图片时，可以给标签的src绑定一个方法，该方法根据条件return它的URL 使用v-if 来决定dom元素是否渲染 多使用伪元素来减少div标签，常用的有before，和after 常用的设置有水平垂直居中，外边距，内边距，圆角，宽高，字体，字高，对齐方式，是否加粗 //字体 fon.
vue开发项目(移动端)
layxing27的博客
10-13 1万+
文章目录
vue3+vant移动端tabbar
07-11
Vue3和Vant是非常流行的移动端开发工具，结合它们来创建一个移动端的TabBar是非常简单的。 首先，你需要安装Vue3和Vant的相关依赖，可以使用npm或者yarn来进行安装。 然后，你可以在Vue的根组件中引入Vant的Tabbar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值