README.zh-CN.md

vue3-vant-mobile

在线 Demo

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

English / 简体中文

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

社区

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

贡献者

Charlie Wang	魏小雨	AlphaYoung	Leezon	liuNing	wswmsword
Kysen	阿峰	ReginYuan	Abraham K.	Mia Campbell	ljt990218
sven	ChunyuPCY	qiyue2015

星星趋势