🔥🔥🔥 基于Vue3、Vant4、Vite2、Pinia2、TypeScript 构建的移动端架子

1,415 阅读2分钟

2024年3月28日更新 勤💧

2.0 发布。文章请看这里 👉 🔥 2024 推荐一款 Vue3 移动端模板 (⚠十个理由)

初心

  • 现在社区里vue2的架子比较多,但是针对vue3的比较少;
  • vue3的基础架子,大部分比较简单,仅仅是一个架子;
  • 有的vue3基础架子,内容比较多,关键的功能没有几个;
  • 此外,这部分vue3架子对编写实际业务功能没有很好地指导;
  • 最后,2023年国内前端开发方向必定从vue2转向vue3;
  • 所以,我先尝试写了一个移动端的架子,来了解vue3世界;

介绍

🔥🔥🔥 基于 Vue3Vant4Vite2Pinia2TypeScript 构建的移动端架子;🚀🚀🚀 集成 Plop 可生成任何类型代码块、集成 Dark Mode (暗黑)配置、集成 Mock 数据、封装基于 TS 的 axios 请求库,以及其它好用的扩展~ 。💖💖💖 简言之,干净简单、好用,可参考,能为你节省一周的开发时间,希望你能喜欢!

特性

  • 支持 Dark Mode (暗黑) 模式;
  • 支持 Components 按需引入、注册组件;
  • 支持 viewport 页面布局;
  • 提供 Axios 封装(基于 ts);
  • 提供 Mock 数据展示;
  • 提供 NProgress 路由加载动画;
  • 提供 Plop 任何语言代码块生成;
  • 集成 Vconsole 本地&生产调试;
  • 集成 eslint、husky代码检查;
  • 以及其它现代项目应该有的工具;

预习

地址

@vue3-vant-mobile

eg. 欢迎大家来Star, PR. 谢谢大家 💖💖💖。

后续

由于项目本身提供的是一个移动端模板基础的架子,本身没有什么内容,帮助到大家的也许是一个参考,也许就是你的项目的一个启动模板,此外,别无其他了。所以,为了有点实质性内容,准备接下来去做一些小游戏(基于ts)。这样或许帮助更大些。以下是计划。

  • 参考尤大的 vue-wordle
  • 实现 经典的 snake 街机游戏;
  • 实现 Flappy 像素鸟游戏;
  • 实现 Fidget 手指陀螺游戏;
  • 实现 Tiles 数字滑块益智游戏;
  • 以及其它经典的小游戏;

预览

vvm-qrocde.png

不足

Mock数据演示 暂时 只支持本地。所以,在线预览的话,mock指南里面没有任何效果。如果想体验下,可以 fork 到本地。未来几天会提供在线数据演示。

记录

  • 以 issue 为任务

image.png

  • 最近的提交记录

image.png

  • 最近发版

image.png


题图摄影:Workperch

图片协议: license