VUE Vant移动端开发

最新推荐文章于 2024-04-04 17:22:42 发布
VIP文章 最新推荐文章于 2024-04-04 17:22:42 发布
阅读量1.8k 收藏 4
点赞数 1
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73849581/article/details/128413376
版权

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元/天 解锁文章
半路出家不会英语
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-vant-template:带有VantUI的Vue移动项目模板
05-20
模板 Vue移动端项目模板，组件库 项目设置 $ yarn install 编译和热重装以进行开发 $ yarn run serve 编译并最小化生产 $ yarn run build 整理和修复文件 $ yarn run lint:fix 自定义配置 请参阅。
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码.zip
05-05
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目软件源码，较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目， 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作学生毕设学习使用。
vue3版本手把手教你如何搭建一个移动端项目。按照步骤来。
最新发布
2401_84091289的博客
04-04 1082
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。[外链图片转存中…(img-ndOPmvW0-1712222518540)][外链图片转存中…(img-Ldw0Bj1J-1712222518540)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。
vue移动端单页面开发模板
08-10
基于 vue2.0 写的单页面应用 Vue.js 中文社区
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant 简介 这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build 配置优势 vant是一套轻量，可靠的移动端Vue组件库，非常适合基于vue技术栈的移动端开发。在过去很长的投放内，本人用的移动端UI框架都是vux。后来由于vux不支持vue-cli3，就转用了vant，必须说，无论是
vue 移动端扫一扫功能
09-23
vue移动端手机的扫一扫功能，可以识别二维码，功能比较简单，有需要的可以下载，希望有所帮助，有什么问题可以在下方进行评论或者留言，看到第一时间会进行修复.
Vue Vant
letterljhx的博客
10-23 2583
Vue Vant
小满Vue3第三十六章（Vue如何开发移动端）
qq1195566313的博客
06-30 1万+
开发移动端最主要的就是适配各种手机，为此我研究了一套解决方案在之前我们用的是rem 根据HTML font-size 去做缩放现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1.安装依赖 因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件vite.config.ts 如果你用的vite 是 ts 他这个插件并没有提供声明文件我已经帮大家写好了声明文件（良心） 引入声明
Vue2移动端项目开发流程
Mr.小灰狼_随笔
09-02 4898
Vue 项目开发流程 目录 移动端电影项目 1、项目效果 2、开发项目流程 3、开发环境 4、初始化项目 @4.5.19 版本Vue脚手架创建项目 UI 图形界面创建项目 Mac 电脑使用 Vue.cli4.X搭建项目流程 5、Vant 移动端组件库 5-1、安装 Vant 5-2、自动按需引入组件( 推荐 ！) 5-3、移动端样式设置（适配） 6、路由规划 7、网络请求 实战案例 :
移动端web开发初探之Vuejs的简单实战
weixin_34008784的博客
01-14 883
这段时间在做的东西，是北邮人论坛APP的注册页。这个注册页是内嵌的网页，因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。 DEMO的github地址在这里 内容提要： meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探 meta标签 这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的...
使用 vue + vant 开发移动端网页
MFWSCQ的博客
09-20 657
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有 css 属性的属性的单位都进行转化，除了 letter-spacing 的。移动端开发的时候我们通常需要进行适配，比如设计图宽度是 750px 我们为了适应不同的设备，需要将我们设计图上的 px 转为 视口单位 vw。这里我们采用 postcss-px-to-viewport。新建 postcss.config.js。
Vant移动端组件库-其他
06-11
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 特性： 1、60+ 高质量组件 2、95% 单元测试覆盖率 3、完善的中英文文档和示例 4、支持按需引入 5、支持主题定制 6、支持国际化 7、支持 TS 8、支持 SSR 建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-plugin-import，通过 babel 插件使用 Vant，可以优化代码体积，提高前端性能。 轻量化 作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系，Vant 内部使用了很多的优化方式，包括支持组件按需加载、公共模块复用、组件编译流程优化等。 在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。 丰富实用的业务组件 Vant 不只是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增加了许多移动商城内常用的业务组件。类似于地址管理、优惠券、省市县选择等。
Vue--移动端开发
郑怪兽
08-23 2374
移动端开发 我们现在关注的点还在移动M站上，或者我们可以叫做webapp，其实就是运行在移动端浏览器中的web网站。 app:application应用程序。 手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。 移动端开发是与PC端肯定是有很大不同的，所以我们需要学习如何在移动设备上开发完美适配的app 开发移动端应用我们需要学习的知识点可以分成如下几个： 移动端布局适配 移动端事件 移动端交互效果 移动端前端框架 移动端调试 移动端布局适配 从屏幕尺寸、屏幕类型
如何为移动开发选择技术栈？
热门推荐
吴小迪的博客
07-21 4万+
今天就来聊一聊 如何选择移动应用开发的技术栈 选择合适的技术栈是移动开发领域最关键的决策之一。你选择的技术栈将为你开发的移动应用提供基本的功能、可拓展和维护性。选择技术栈时应该注意项目的类型、预期投入市场的时间和创意的可行性。 原则上来说，选择何种技术栈取决于产品的设计目标。例如，跨平台方法对于初创公司是一个很好的解决方案，而原生开发适合构建具有出色性能的复杂移动应用。 对于缺乏技术背景的客户来说...
Vue.js构建移动端商城系统前端页面
禅与计算机程序设计艺术
09-23 1996
作者：禅与计算机程序设计艺术 1.简介 随着移动互联网的普及，越来越多的人开始使用手机浏览网站或APP，如何在移动端开发中构建出具有吸引力、功能丰富的用户界面呢？本文将详细阐述基于Vue.js构建移动端商城系统前端页面的相关技术实现过程。 2.项目背景
基于Vant组件的Vue移动端黑马头条项目Day02 登录注册
qq_39349116的博客
09-11 3836
二、登录注册 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 准备 创建组件并配置路由 1、创建 src/views/login/index.vue 并写入以下内容 <template> <div class="login-container">登录页面</div> </template>
Vue--Vant组件
小白小白从不日别的博客
09-15 8651
官网地址 适用于移动端 首先，通过 vue create xxx 创建 vue 项目 其次，对于 vant 的安装有如下几种方式： 一是通过， --本项目用的方式 # Vue 2 项目，安装 Vant 2： npm i vant -S # Vue 3 项目，安装 Vant 3： npm i vant@next -S 一是通过 CSDN， <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.js
Vue.js开发移动端经验总结
油墨香^-^的博客
02-16 748
layoutviewport布局宽度，就是网页的宽度visualviewport可是宽度，就是浏览器窗口的宽度，这个值决定了我们手机一屏能看到的内容；visualviewport和layoutviewport的大小关系，决定了是否会出现滚动条，当visualviewport更大或者刚好等于layoutviewport时是不会出现滚动条的。idealviewport为浏览器定义的可完美适配移动端的viewport，固定不变，可以认为是设备视口宽度device-width。
vant组件库的使用 - - - vue2篇&小程序篇
sywdebug的博客
12-07 8049
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
vue3+vant移动端tabbar
07-11
Vue3和Vant是非常流行的移动端开发工具，结合它们来创建一个移动端的TabBar是非常简单的。 首先，你需要安装Vue3和Vant的相关依赖，可以使用npm或者yarn来进行安装。 然后，你可以在Vue的根组件中引入Vant的Tabbar和TabbarItem组件。例如： ```vue <template> <div> <van-tabbar v-model="active" active-color="#1989fa"> <van-tabbar-item icon="home-o" :to="{ path: '/' }"></van-tabbar-item> <van-tabbar-item icon="search" :to="{ path: '/search' }"></van-tabbar-item> <van-tabbar-item icon="star-o" :to="{ path: '/favorites' }"></van-tabbar-item> <van-tabbar-item icon="setting-o" :to="{ path: '/settings' }"></van-tabbar-item> </van-tabbar> <router-view></router-view> </div> </template> <script> export default { data() { return { active: '/' } } } </script> ``` 在上面的代码中，我们使用了Vant的Tabbar和TabbarItem组件来创建一个底部导航栏。通过v-model绑定active属性，我们可以控制当前选中的Tab。 同时，在每个TabbarItem组件中，我们使用了Vue Router的to属性来设置跳转路径。 最后，在根组件中使用了<router-view>组件来展示当前选中Tab对应的页面内容。 这样，你就可以使用Vue3和Vant来创建一个移动端的TabBar了。当然，你还需要根据自己的需求进行样式和逻辑的定制。希望对你有帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值