2024 推荐一款 Vue3 移动端模板（十个理由🎉）

vvm - 基于 Vue3 生态的移动端模板

vvm - 项目预览，使用 Lighthouse 分析看看评分

nxm - 基于 Nuxt3 生态的移动端模板（WIP）

前言

我之前写过一篇推荐一款基于Vue3的移动H5模板，加速你的移动应用开发，那篇文章介绍了我为什么做这个模板，简单讲当时 Vite 作为一款新的构建工具刚刚出来，还有Vue3也刚刚发布不久，社区里面关于中后台模板非常丰富，但是移动端的还很少，或者说做的不够好，所以那样一个契机下我从2022年一直开源到现在，也快两年时间了。

这个过程中，vue3-vant-mobile 也发布了 2.0 版本。新增了很多功能和示例，这是这篇文章的目的之一，讲讲新增了什么。第二个目的，2024年的时候，移动端模板也有很多了，不过我自认为我做的还算是可以的，所以我想推荐你用这一个。

需要强调的是移动端该有的东西，本文没有太多描述，它本该如此。介绍的是相对于其它模板的优势。

目的非常明确，希望的是收获更多关注，让模板有更多人使用。为了不让文章那么乏味，会有对比、会有思考，我们开始吧！

1. vue3生态 - 最好用的 DX 体验都有

在模板早期的时候，它支持的事情不是很多，就是一个很普通的移动端模板，应该有的特性比如：移动端适配、Mock 数据模拟、VConsole 调试、Less 预处理器，默认内置的组件库，以及 vue3 全家桶里面的状态管理 Pinia、Router、setup、TS 支持等等。不过在 2.0 的时候，我增加了基于文件路由、组件自动引入、基于文件路由的布局系统、API自动导入、PWA（渐进式Web）、Unocss、PC 版心等等。这些新特性在使用 VS Code 编辑器进行业务开发，就会发现效率飞起。对了，Eslint 采用了antfu 的最新 eslint flat 插件配置，DX 体验更上一层楼。在同类项目当中，我发现这些特性要么就是没有集成、或者不全、甚至依赖版本滞后，但是这个模板一直在更新，使用最新最稳定的版本。

2. vw 响应式、PC友好

很多做前端的同学都知道，移动端适配这块有两种主流的方案，rem 和 vw, 不过基于 rem 的方案也说过是应对早期这种适配的解决方案，现在 vw 单位在众多浏览器支持度更好了，更建议使用 vw, 所以模板也是采用了这种实现。PC 友好又是什么呢？vw/vh 是一种视宽和视高的单位，基于浏览器窗体大小来的；而 rem 是基于文档头设置的font-size 决定的, 当用户在 PC 端打开你的移动端应用的时候，所有页面元素都会放大，导致很多交互都失效了，甚至个别元素不能操作。如果 rem 方案的话，我之前写过一款 rem-font-size 插件，可以设置一个版心，其实就是修改根字体大小，以及限制最大宽度，vw 要多谢postcss-mobile-forever 插件的作者给模板的一个PR，它也解决了 PC 版心的问题。所以这块的担心，也帮大家考虑到了。

3. 贡献者最多

项目是托管在 GITHUB 上的，目前为止，有10位小伙伴参与了贡献，其中一位在我合并代码时不小心给合并掉了，当时因为这件事很难受。其实这个项目的 Fork 有 118，不过真正参与的同学也就是10位，但是也是一个很不错的数字。今天刷到尤大的一个帖子。

然后底下有个评论很有意思。

是的，在项目的早期很小的时候，项目维护者是很希望有更多贡献者参与进来，哪怕是错别字一类的PR 提交，这是很令人兴奋的事情。同时，这也意味着更多人在使用，社区影响力也就越大。

下面是给 vue3-vant-mobile 贡献的小伙伴，谢谢他们 💖。

4. ESM 默认

估计不少同学会笑起来，ESM 默认就是在package.json 设置 type: "module"？这也是一个优势吗？至少我认为是的，从两方面说说。其中一方面是如果不设置项目类型，项目默认采用Commonjs 规范，在一个没有明确类型的项目里，可能存在两种 CJS 或者 ESM 写法，让当事人去维护感觉会很错乱。当我显式设置 ESM 项目类型以后，1.0 以前很多的模块引入写法以及包依赖就报了大量错误，所以升级到 2.0 是一大部分工作，相当于重写。另外一方面，可能使用的人无感知，就是本机会加快渲染，因为采用的是浏览器原生支持的模块加载机制更快了。所以这也算是一个优势！