Mobile + Vue = MobVue

English | 中文

简介

MobVue 是一个精心制作的移动端 H5 模板，基于 Vue3、Vite、TypeScript、Vant 等主流技术

通知

[!NOTE]为爱发电！所有源码均免费开源，如果对你有帮助，欢迎点个 Star 支持一下！

[!TIP]正式推出付费服务，如果不想自己动手，但想移除 TS 或其他模块？试试懒人套餐！点击看看

使用

推荐环境

- 新版 `Visual Studio Code`- 安装 `.vscode/extensions.json` 文件中推荐的插件- `node` 20.x 或 22+- `pnpm` 9.x 或 10+- `bun` 最新的

本地开发

使用 `Node` + `pnpm````bash# 安装依赖pnpm i# 启动服务pnpm dev```使用 `Bun````bashbun ibun run dev```

打包构建

使用 `Node` + `pnpm````bash# 打包构建预发布环境pnpm build:staging# 打包构建生产环境pnpm build```使用 `Bun````bashbun run build:stagingbun run build```

本地预览

使用 `Node` + `pnpm````bash# 先执行打包构建命令生成 dist 目录后再执行以下预览命令pnpm preview```使用 `Bun````bashbun run preview```

代码检查

使用 `Node` + `pnpm````bash# 代码校验与格式化pnpm lint# 单元测试pnpm test```使用 `Bun````bashbun run lintbun run test```

代码提交规范

`feat` 新功能`fix` 修复错误`perf` 性能优化`refactor` 重构代码`docs` 文档和注释`types` 类型相关`test` 单测相关`ci` 持续集成、工作流`revert` 撤销更改`chore` 琐事（更新依赖、修改配置等）

链接

在线预览：github-pages

文档教程：链接

后台管理系统：v3-admin-vite

国内仓库：gitee

交流群：查看进群方式

捐赠：请作者喝咖啡

发行版 & 更新日志：releases

特性

🔥 最新的语法、配置、依赖

📍纯一级路由设计 - 清晰且缓存友好

📱 移动端适配 px2vw - 并且宽屏友好

🌐 浏览器适配 @vitejs/plugin-legacy+autoprefixer+browserslist - 兼容多种浏览器和低版本浏览器

🧩布局系统 - 配置化的

🔒 权限控制页面级、按钮级

🌗 主题模式 Dark Mode

🫧拥抱原子化 CSS

📲PWA - 渐进式 Web 应用

🔧组件和API自动按需导入

🔎Husky+lint-staged+ESLint - 规范代码

💪🏻 依然 TypeScript - 严格模式且无 any

技术栈

Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API

Vant：轻量、可定制的移动端 Vue 组件库

Pinia：传说中的 Vuex5

Vite：真的很快

Vue Router：路由路由

TypeScript：JavaScript 语言的超集

pnpm：更快速的，节省磁盘空间的包管理工具

ESLint：代码校验与格式化

Axios：发送网络请求（已封装好）

UnoCSS：具有高性能且极具灵活性的即时原子化 CSS 引擎

Bun：一款快速的 JavaScript 运行时

项目预览图

preview

mobvuevue3vitetypescript

作者：un-pany 开源协议：MIT

Mobile + Vue = MobVue

简介

通知

使用

链接

特性

技术栈

项目预览图

License