vue3-vant-mobile

<div align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ad040beb-f130-4abb-a1f5-e083277181ed.png" alt="封面" /> <h1 align="center">vue3-vant-mobile</h1>

English / 简体中文

一个基于 Vue 3 生态系统的移动端 web 应用模板。

一个基于 Vue 3 生态系统的移动端 web 应用模板，帮助你快速完成业务开发。

文档 / 交流 / 反馈

</div> <br>

特性

⚡️ Vue 3、Vite 5、pnpm、esbuild - 为速度而生
🗂 基于文件的路由
📦 组件自动导入
🍍 使用 Pinia 进行状态管理
📲 PWA
🎨 UnoCSS - 即时按需原子 CSS 引擎
🌍 国际化就绪
🔥 使用新的 <script setup> 语法
📥 API 自动导入 - 直接使用 Composition API 等功能
💪 TypeScript，当然
⚙️ 使用 Vitest 进行单元测试
💾 支持 Mock 服务器
🌈 Git hooks - 用于 lint 和提交
🪶 Vant - 移动端 Vue UI 库
🔭 vConsole - 移动端网页开发者工具
📱 浏览器适配 - 使用 viewport vw/vh 单位
💻 桌面优化 - 移动端区域
🌓 支持深色模式
🛡️ 配置 ESM 为默认
☁️ 零配置部署在 Netlify

<br>

预置

UI 框架

UnoCSS - 即时按需原子 CSS 引擎
- @unocss/preset-rem-to-px - 将所有工具类的 rem 转换为 px
- eslint-plugin-unocss - UnoCSS 的 ESLint 插件
Vant - 移动端 Vue UI 库
- vant-touch-emulator - 在桌面端模拟移动端触摸事件
- vant-use - Vant 内置的组合式 API

插件

Vue Router
- unplugin-vue-router - 基于文件系统的路由
Pinia - 直观、类型安全、轻量且灵活的 Vue 状态管理
- pinia-plugin-persistedstate - Pinia 状态持久化和重新加载的可配置插件
Vue I18n - 国际化
- unplugin-vue-i18n - Vue I18n 的 unplugin
unplugin-vue-components - 组件自动导入
unplugin-auto-import - 直接使用 Vue Composition API 等功能无需导入
vite-plugin-vconsole - 轻量、可扩展的移动端前端开发工具
vite-plugin-mock-dev-server - 用于 API 模拟开发服务器的 Vite 插件
postcss-mobile-forever - 通过一个移动端视口适配不同显示器
vite-plugin-vue-devtools - 旨在增强 Vue 开发者体验
vueuse - 实用的组合式 API 集合
@unhead/vue - 响应式地操作文档头部
vite-plugin-pwa - PWA
vite-plugin-sitemap - 站点地图和 robots 生成器

编码风格

使用 Composition API 配合 <script setup> SFC 语法
ESLint 配合 @antfu/eslint-config，单引号，无分号

开发工具

TypeScript
Vitest - 基于 Vite 的单元测试框架
pnpm - 快速、节省磁盘空间的包管理器
Netlify - 零配置的部署
VS Code 扩展
- Vite - 自动启动 Vite 服务器
- Volar - Vue 3 <script setup> IDE 支持
- Iconify IntelliSense - 图标内联显示和自动补全
- i18n Ally - 全方位的 i18n 支持
- ESLint

现在开始

vue3-vant-mobile 需要 Node 18+

GitHub 模板

使用这个模板创建仓库

克隆到本地

如果您更喜欢手动操作，可以使用更干净的 git 历史记录

npx tiged easy-temps/vue3-vant-mobile my-mobile-app
cd my-mobile-app
pnpm i # 如果你没有安装 pnpm，可以先运行：npm install -g pnpm

检查清单

当你使用此模板时，请尝试按照清单正确更新你的信息

在 LICENSE 中改变作者名
在 index.html 中改变标题
在 vite.config.ts 中改变主机名
在 public 目录下改变 favicon
移除 README 中的路由和改变默认内容

然后，尽情享用 :)

使用

开发

只需要执行以下命令就可以在 http://localhost:3000 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

部署到 Netlify

前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建。

社区

我们建议使用问题反馈或微信群进行问题反馈。

捐赠 ☕

给我买杯咖啡

<h2 align="center">💝 我们的赞助商 💝</h2> <p align="center"> 您的赞助将帮助我们继续迭代这个激动人心的项目！🚀 </p> <p align="center"> <a href="https://github.com/keyFeng"><img src="https://avatars.githubusercontent.com/u/52267976?v=4" width="60px" alt="keyFeng" /></a> <a href="https://github.com/ljt990218"><img src="https://avatars.githubusercontent.com/u/50509815?v=4" width="60px" alt="ljt990218" /></a> <a href="https://github.com/heked"><img src="https://avatars.githubusercontent.com/u/14127731?v=4" width="60px" alt="heked" /></a> </p> <h2 align="center"> 💪 贡献者 💪 </h2> <p align="center"> 我们的贡献者让这个项目变得更好。感谢你们！🙏 </p> <p align="center"> <a href="https://github.com/CharleeWa"><img src="https://avatars.githubusercontent.com/u/22477554?v=4" width="60px" alt="CharleeWa" /></a> <a href="https://github.com/ljt990218"><img src="https://avatars.githubusercontent.com/u/50509815?v=4" width="60px" alt="ljt990218" /></a> <a href="https://github.com/wswmsword"><img src="https://avatars.githubusercontent.com/u/26893092?v=4" width="60px" alt="wswmsword" /></a> <a href="https://github.com/weiq"><img src="https://avatars.githubusercontent.com/u/1697158?v=4" width="60px" alt="weiq" /></a> <a href="https://github.com/SublimeCT"><img src="https://avatars.githubusercontent.com/u/20380890?v=4" width="60px" alt="SublimeCT" /></a> <a href="https://github.com/ReginYuan"><img src="https://avatars.githubusercontent.com/u/49477488?v=4" width="60px" alt="ReginYuan" /></a> <a href="https://github.com/smartsf"><img src="https://avatars.githubusercontent.com/u/19995400?v=4" width="60px" alt="smartsf" /></a> <a href="https://github.com/Kysen777"><img src="https://avatars.githubusercontent.com/u/63892082?v=4" width="60px" alt="Kysen777" /></a> <a href="https://github.com/Leezon"><img src="https://avatars.githubusercontent.com/u/38120280?v=4" width="60px" alt="Leezon" /></a> <a href="https://github.com/AlphaYoung111"><img src="https://avatars.githubusercontent.com/u/54132313?v=4" width="60px" alt="AlphaYoung111" /></a> <a href="https://github.com/leo4developer"><img src="https://avatars.githubusercontent.com/u/15160478?v=4" width="60px" alt="leo4developer" /></a> <a href="https://github.com/InsHomePgup"><img src="https://avatars.githubusercontent.com/u/47906083?v=4" width="60px" alt="InsHomePgup" /></a> <a href="https://github.com/wowping"><img src="https://avatars.githubusercontent.com/u/137802961?v=4" width="60px" alt="wowping" /></a> <a href="https://github.com/ChunyuPCY"><img src="https://avatars.githubusercontent.com/u/21986942?v=4" width="60px" alt="ChunyuPCY" /></a> <a href="https://github.com/qiyue2015"><img src="https://avatars.githubusercontent.com/u/11554433?v=4" width="60px" alt="qiyue2015" /></a> <a href="https://github.com/pyQianYi"><img src="https://avatars.githubusercontent.com/u/57526688?v=4" width="60px" alt="pyQianYi" /></a> <a href="https://github.com/xyy94813"><img src="https://avatars.githubusercontent.com/u/17971352?v=4" width="60px" alt="xyy94813" /></a> </p>