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

[CharleeWa]

vue3-vant-mobile

An mobile web apps template based on the Vue 3 ecosystem.

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

文档 / 交流 / 反馈

🖥 在线预览

Features

• ⚡️ Vue 3, Vite 6, pnpm, esbuild - 就是快！

• 🗂 基于文件的路由

• 📦 组件自动化加载

• 🍍 使用 Pinia 的状态管理

• 📲 PWA

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 🌍 I18n 国际化开箱即用

• 🔥 使用 新的 <script setup> 语法

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 💪 TypeScript, 当然

• ⚙️ 使用 Vitest 进行单元测试

• 💾 本地数据模拟的支持

• 🌈 Git hooks - 提交代码 eslint 检测 和 提交规范检测

• 🪶 Vant - 移动端 Vue 组件库

• 🔭 vConsole - 移动端网页开发工具

• 📱 浏览器适配 - 使用 viewport vw/vh 单位布局

• 💻 桌面端优化 - 处理为移动端视图

• 🌓 支持深色模式

• 🛡️ 将 ESM 设为默认

• ☁️ 零配置部署 Netlify

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
  • @unocss/preset-rem-to-px - 将所有实用程序的 rem 转换为 px
  • eslint-plugin-unocss - Unocss 的 ESLint 插件
• Vant - 移动端 Vue 组件库
  • vant-touch-emulator - 在桌面端上模拟移动端 touch 事件
  • vant-use - Vant 内置的组合式 API

插件

• Vue Router
  • unplugin-vue-router - 以文件系统为基础的路由
• Pinia - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理库
  • pinia-plugin-persistedstate - 适用于 Pinia 的持久化存储插件
• Vue I18n - 国际化
  • unplugin-vue-i18n - Vue I18n 的 Vite 插件
• unplugin-vue-components - 自动加载组件
• unplugin-auto-import - 直接使用 Composition API 等，无需导入
• vite-plugin-vconsole - vConsole 的 vite 插件
• vite-plugin-mock-dev-server - vite mock 开发服务（mock-dev-server）插件
• postcss-mobile-forever - 一款 PostCSS 插件，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图
• vite-plugin-vue-devtools - 旨在增强Vue开发者体验的Vite插件
• vueuse - 实用的 Composition API 工具合集
• @unhead/vue - 响应式地操作文档头信息
• vite-plugin-pwa - PWA
• vite-plugin-sitemap - sitemap 和 robots 生成器

编码风格

• 使用 Composition API 地 <script setup> SFC 语法
• ESLint 配置为 @antfu/eslint-config, 单引号, 无分号

开发工具

• TypeScript
• Vitest - 基于 Vite 的单元测试框架
• pnpm - 快, 节省磁盘空间的包管理器
• Netlify - 零配置的部署
• VS Code Extensions
  • Volar - Vue 3 <script setup> IDE 支持
  • Unocss - Unocss 智能提示
  • Goto Alias - 跳转到定义
  • Iconify IntelliSense - 图标内联显示和自动补全
  • File Nesting - 文件嵌套
  • i18n Ally - 多合一的 I18n 支持
  • ESLint - ESLint 支持
  • Better JSON5 - JSON5 支持

项目截图

现在可以试试

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 下去，稍等一下后，你的应用将被创建。