vue3-vant-mobile

[English](./README.md) / 简体中文 An mobile web apps template based on the Vue 3 ecosystem. 一个基于 Vue 3 生态系统的移动 web 应用模板，帮助你快速完成业务开发。

[文档](https://easy-temps.github.io/easy-docs/vue3-vant-mobile/) / [交流](https://github.com/easy-temps/vue3-vant-mobile/issues/56) / [反馈](https://github.com/easy-temps/vue3-vant-mobile/issues) 在线 Demo [![Netlify Status](https://api.netlify.com/api/v1/badges/e6828bd2-2904-4c3e-a67c-b97d32aa12/deploy-status)](https://app.netlify.com/sites/vue3-vant-mobile/deploys)

Features

⚡️ Vue 3, Vite 5, 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
- 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 下去，稍等一下后，你的应用将被创建。

社区

我们推荐使用议题来反馈问题, 或者您也可以通过微信群联系我们。

捐赠 ☕

请我喝一杯咖啡

💝 我们的赞助者 💝

您的赞助将帮助我们继续迭代这个令人兴奋的项目! 🚀

💪 贡献者 💪

我们的贡献者使这个项目变得更好。谢谢你！ 🙏

License

MIT License

README.zh-CN.md 11 KB Histórico Raw