前端 Vue3 + Vant3 + Vite2 构建移动端框架及DEMO

已于 2022-11-21 13:19:15 修改
阅读量1.7k 收藏 8
点赞数
文章标签： vue.js 前端 前端框架 javascript html5
于 2022-03-08 16:29:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_28301509/article/details/123356710
版权

稍早前，学习了利用 Vue3 + Vant3 + Vite2 构建移动端项目架构，欢迎批评指正。

简单DEMO预览https://gitee.com/jifengf/vite-vue3-h5/raw/dev/src/assets/aa71c12e1c110227e4f4d49d15dd2837.gif


gitee项目地址https://gitee.com/jifengf/vite-vue3-h5

移动端布局方案

  • 移动端 Vant3.x + Vue3.x + Vite2.x + Mockjs + Vue-Router4.x + Vuex4.x + REM(postcss-pxtorem) 布局布局的实例运用

首次使用项目，建议 npm run mock, 体验效果佳

配置文件说明

  • vite.config.js vite 配置文件

  • postcss.config.js postcss 配置文件

master 分支

  1. 简单 demo 示例。

dev 分支

  1. 这里是列表文本通过 mock 数据，实现了首页，某东分类，某多分类，购物车（部分功能），我的(可进入江苏旅游舒适度页面）

季风f
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
探索Vant Demo：一个全方位的UI组件库示例平台
gitblog_00074的博客
04-25 305
探索Vant Demo：一个全方位的UI组件库示例平台 项目地址:https://gitcode.com/youzan/vant-demo Vant Demo 是由有赞公司开源的一款基于Vant UI的交互演示与代码示例集合。该项目旨在为开发者提供一个直观、易用和全面的前端界面构建工具，帮助他们在开发过程中快速理解并应用Vant UI组件。 Vant UI简介 Vant UI 是一款轻量级的移动端...
vant-demo.zip
03-27
vue vant 实现原生H5 APP混合开发，原生APP 接口实现 移动端H5，微信公众号，IOS，安卓
vite4+vue3+vant初始化移动端项目框架
最新发布
SummerGao
05-31 82
在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要手动引入样式。我们看到以上配置中，自动引入的有vue、vue-route、vue-i18n以及src/auto-imports.d.ts。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。为了方便地进行代码格式修复、报错提醒、规范化，这里继续安装和配置eslint。
12个主流Vue3前端框架
烈焰大火龙的博客
10-24 6384
谷歌风格的前端UI，是Vuetify的平替(毕竟Vuetify自动Vue以后就没有官方中文文档了用着还是很不方便)一个老牌的谷歌风格的UI库，Vue2时代是我的最爱，但是3版本还没有更新中文 Sad T^T ~Vant4一个特别好用的移动端UI框架，主打的就是一个按需引用、轻量级，快！一个仅支持Vue3的全新前端UI库，但组件相对其他库更精致齐全。腾讯推出的一套UI框架，包含桌面和移动端等，风格比较统一。一个风格简洁的移动端UI库，看起来好像很不错捏。前端的主流框架很多公司都在用，不多作介绍。
第一个Vant的demo
weixin_65493827的博客
09-24 935
Vant
前端VUE3+Vite -- 框架搭建
寿春
06-02 4652
卸载 vue – 安装 vue Vite vite 官网学习开始构建越来越大型的应用时，需要处理的 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 ，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。1.旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 模块，且越来越多 2. 工具使用编译型语言编写。...
vue3使用的移动端UI框架,vue移动端ui框架哪个好
goodutils的博客
09-10 6511
这些写法首先要获取Dom节点，也就是Dom结构，然后再修改数据更新结构的内容，使用jQuery的一个很大的目的就是为了去简化Dom的操作，而使用Vue就大不一样了，Vue的做法就是直接=HelloWorld，然后msg就会自动的同步到结构上，我们所要关心的是数据内容的改变，而不再去关心如何操作Dom结构了。11、其他因素：React从一开始就抱上了TypeScript的大腿，而Vue目前仍以ES为主，不得不说，在很长一段时间内，TS都是优于ES的，而Vue社区要切换TS生态，还有一段路要走。
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+Vant+pinia 开箱即用，移动端框架
01-30
vue3+Vant+pinia移动端框架： 1、已集成搭建适配方法：postcss-pxtorem || lib-flexible； 2、已安装最新路由搭建框架； 3、使用sass样式处理； 4、已集成nprogress进度条并全局配置； 5、安装最新pinia插件，配合...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
移动端vue3+vite+vant 框架
07-19
综上所述，“移动端vue3+vite+vant 框架”为移动端应用开发提供了一套高效、易用的解决方案，结合Vue3的先进特性、Vite的快速构建能力和Vant的丰富组件，可以极大地提高开发效率，同时保证应用的质量和用户体验。
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
使用vue3 + TS + Pinia + Vant4 + vite搭建商城H5项目框架
m0_55337573的博客
04-04 4157
搭建初始化的商城H5项目框架。 初始化阶段使用的技术栈有：vue3.2、vue-router、TS 、 Pinia 、 Vant4、Less、vite
9 个值得推荐的 VUE3 UI 框架
Z__7Gk的博客
06-29 4089
本文推荐几个比较流行的 VUE3 UI 框架，同时提供出色的开发人员体验，合理利用，又或者学习借鉴都是不错的选择，排名不分先后。
探索优雅前端设计：Vant Demo - 极简主义组件库的实践示例
gitblog_00024的博客
03-24 371
探索优雅前端设计：Vant Demo - 极简主义组件库的实践示例 项目地址:https://gitcode.com/vant-ui/vant-demo Vant Demo 是一个基于 Vue.js 的开源组件库 Vant 的演示与实践平台。这个项目为开发者提供了一个直观的界面，用于查看和尝试各种预设的 UI 组件，帮助他们更好地理解和应用 Vant 在自己的项目中。 技术分析 基于 Vue.js...
vue+vant搭建移动端框架
热门推荐
qq_20464593的博客
08-13 1万+
主要内容 1.vant/rem移动端适配的解决方案 2. vue/cli二次配置及优化处理 3.基于注册动态模式实现loading 4.掌握vuex永久化存储 1 创建一个vue项目 1.1安装vue-cli: npm install -g @vue/cli 1.2初始化项目 vue create vue-vant (1)选择手动配置 空格切换选中状态 插件选择这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查） Babel:支持es6
vue3移动端适配的解决方案
weianl的博客
12-03 1万+
最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。
vue3+vite3+vant搭建移动端简易模版
发果叁
09-30 3830
vue3.x相关的生态已经在不断的完善中，相应的UI/路由/pinia等都已成熟，新的项目也在考虑使用新版本开发了，开一个帖子记录一下搭建移动端简易模版的过程，方便以后回顾。
VantDemo
苟且。的博客
03-07 336
https://youzan.github.io/vant/?from=madewith.cn#/zh-CN
vue3+vant移动端tabbar
07-11
Vue3和Vant是非常流行的移动端开发工具，结合它们来创建一个移动端的TabBar是非常简单的。 首先，你需要安装Vue3和Vant的相关依赖，可以使用npm或者yarn来进行安装。 然后，你可以在Vue的根组件中引入Vant的Tabbar...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

季风f

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值