[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8900":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":15,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},8900,"vue3-h5-template","yulimchen\u002Fvue3-h5-template","yulimchen","🌱 A ready-to-use mobile project base template built with the Vue3, Vant, and Vite. | 基于 Vue3、Vite8、TypeScript\u002FJavaScript、Tailwindcss、Vant4，开箱即用的移动端项目基础模板","https:\u002F\u002Fyulimchen.github.io\u002Fvue3-h5-template\u002F",null,"Vue",1518,337,15,1,0,3,12,20.59,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"app","demo","eruda","h5","i18n","iconify","javascript","js","mobile","pinia","starter","tailwindcss","template","ts","typescript","vant","vite","vmin","vue","vue3","2026-06-12 02:02:00","\u003Cdiv align=\"center\">\r\n\t\u003Cimg src=\"docs\u002Fassets\u002Fimg\u002Fbanner.jpg\" alt=\"banner\" \u002F>\r\n\u003C\u002Fdiv>\r\n\r\n\u003Cdiv align=\"center\">\r\n\t\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Fblob\u002Fmaster\u002FLICENSE\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fyulimchen\u002Fvue3-h5-template.svg?style=flat-square\" alt=\"license\">\r\n  \u003C\u002Fa>\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Freleases\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease\u002Fyulimchen\u002Fvue3-h5-template.svg?style=flat-square\" alt=\"GitHub release\">\r\n  \u003C\u002Fa>\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fyulimchen\u002Fvue3-h5-template?style=flat-square\" alt=\"GitHub stars\">\r\n  \u003C\u002Fa>\r\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\">\r\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fyulimchen\u002Fvue3-h5-template?style=flat-square\" alt=\"GitHub forks\">\r\n  \u003C\u002Fa>\r\n\u003C\u002Fdiv>\r\n\r\n\u003Ch1 align=\"center\">Vue3 H5 Template\u003C\u002Fh1>\r\n\r\n**🌱 基于 Vue3 全家桶、TS\u002FJS、Vite 构建工具，开箱即用的移动端项目基础模板**\r\n\r\n- [x] ⚡ Vue3 + Vite5\r\n- [x] 🍕 TypeScript\r\n- [x] ✨ Vant4 组件库\r\n- [x] 🌀 Tailwindcss 原子类框架\r\n- [x] 👏 集成多种图标方案\r\n- [x] 🍍 Pinia 状态管理\r\n- [x] 🌓 支持深色模式\r\n- [x] 🧀 支持 i18n\r\n- [x] Vue-router 4\r\n- [x] vmin 视口适配\r\n- [x] Axios 封装\r\n- [x] 打包资源 gzip 压缩\r\n- [x] 开发环境支持 Mock 数据\r\n- [x] ESLint\r\n- [x] 首屏加载动画\r\n- [x] 开发环境调试面板\r\n- [x] 生产环境 CDN 依赖\r\n\r\n**如有 i18n 国际化多语言需求，请切换到 [i18n](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Ftree\u002Fi18n) 分支**\r\n\r\n**主分支默认 TypeScript，如果你希望使用的是 JavaScript 语言，请切换 [js-version](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Ftree\u002Fjs-version) 分支进行开发**\r\n\r\n## 在线预览 Preview\r\n\r\n👓 [点击这里](https:\u002F\u002Fyulimchen.github.io\u002Fvue3-h5-template\u002F)（PC浏览器请切换手机端模式）\r\n\r\n## 运行项目\r\n\r\n注意：要求 Node 版本 18+，可使用 [nvm](https:\u002F\u002Fgithub.com\u002Fnvm-sh\u002Fnvm#installing-and-updating) 进行本地 Node 版本管理，同时建议使用 [pnpm](https:\u002F\u002Fpnpm.io\u002Fzh\u002Finstallation) 包管理器。\r\n\r\n```shell\r\n# 克隆项目\r\ngit clone https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template.git\r\n\r\n# 进入项目目录\r\ncd vue3-h5-template\r\n\r\n# 安装依赖\r\npnpm install\r\n\r\n# 启动服务\r\npnpm dev\r\n```\r\n\r\n[i18n](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Ftree\u002Fi18n) 国际化多语言版本 clone 方式\r\n\r\n```shell\r\n# 克隆项目\r\ngit clone -b i18n https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template.git\r\n\r\n# 同上进入目录&安装依赖等\r\ncd vue3-h5-template\r\n```\r\n\r\n如果你需要的是基于 `JavaScript` 构建的 H5 项目模板，可切换到 [js-version](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Ftree\u002Fjs-version) 分支进行开发\r\n\r\n```shell\r\n# 克隆项目\r\ngit clone -b js-version https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template.git\r\n\r\n# 同上进入目录&安装依赖等\r\ncd vue3-h5-template\r\n```\r\n\r\n## 文档引导\r\n\r\n> - [按需引入 vant 组件](#vant)\r\n> - [图标使用](#icon)\r\n> - [路由缓存 & 命名注意 ⚠](#router)\r\n> - [调试面板 eruda](#console)\r\n> - [动态设置页面标题](#page-title)\r\n> - [vw 视口适配](#viewport)\r\n> - [Tailwindcss 原子类框架](#tailwindcss)\r\n> - [Git 提交信息规范](#git)\r\n> - [CDN 加载依赖](#CDN)\r\n\r\n### \u003Cspan id=\"vant\">按需引入 vant 组件\u003C\u002Fspan>\r\n\r\n全量引入组件库太过臃肿，项目中使用 `unplugin-vue-components` 插件进行按需自动引入组件，可通过[官方文档](https:\u002F\u002Fvant-ui.github.io\u002Fvant\u002F#\u002Fzh-CN\u002Fquickstart#2.-pei-zhi-cha-jian)了解更多。\r\n\r\n### \u003Cspan id=\"icon\">图标使用\u003C\u002Fspan>\r\n\r\n① **Iconify 图标（推荐）**\r\n\r\nIconify 拥有图标数量超过 20 万的图标库，同时文档比较友好，本项目基于 `Iconify for Vue` 稍微进行了封装。\r\n\r\n使用方法 ⑴：\r\n\r\n![Snipaste_2024-06-27_00-00-17](docs\u002Fassets\u002Fimg\u002FSnipaste_2024-06-27_00-00-17.png)\r\n\r\n基于 Iconify [图标集网站](https:\u002F\u002Ficon-sets.iconify.design\u002F)获取到你想要的图标名称后填入 `i-icon` 组件的 `icon` 属性即可。\r\n\r\n```vue\r\n\u003Ci-icon icon=\"fa6-solid:heart\" \u002F>\r\n```\r\n\r\n配合 VS Code [编辑器扩展](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.iconify)可在编码时实时预览图标！\r\n\r\n![Snipaste_2024-06-27_00-43-17](docs\u002Fassets\u002Fimg\u002FSnipaste_2024-06-27_00-44-55.png)\r\n\r\n注意，方法 ⑴ 是通过 Iconify API 按需请求获取图标，如果你的项目仅在内网环境部署，可通过👇🏻方法 ⑵ 离线使用图标。\r\n\r\n使用方法 ⑵ ：\r\n\r\n基于 Iconify [图标集网站](https:\u002F\u002Ficon-sets.iconify.design\u002F)搜索到你想要的图标，安装图标对应的图标集依赖包。\r\n\r\n```shell\r\npnpm i -D @iconify-icons\u002Ffa6-solid\r\n```\r\n\r\n*依赖包名规则：@iconify-icons\u002F[图标集]*\r\n\r\n![Snipaste_2024-06-27_00-07-10](docs\u002Fassets\u002Fimg\u002FSnipaste_2024-06-27_00-07-10.png)\r\n\r\n引入你想要的图标 data，赋值给 `i-icon` 组件的 `icon` 属性即可。\r\n\r\n*图标路径规则：@iconify-icons\u002F[图标集]\u002F[图标名]*\r\n\r\n```ts\r\nimport Fa6SolidHeart from '@iconify-icons\u002Ffa6-solid\u002Fheart'\r\n```\r\n\r\n```vue\r\n\u003Ci-icon :icon=\"Fa6SolidHeart\" \u002F>\r\n```\r\n\r\n案例代码可参考本项目的 `tools` [页面](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Fblob\u002Fmaster\u002Fsrc\u002Fviews\u002Ftools\u002Findex.vue)，想对强大的 Iconify 了解更多？请戳 👉 https:\u002F\u002Ficonify.design\u002Fdocs\u002F\r\n\r\n② 本地 SVG 文件图标\r\n\r\n> 1. 将 svg 图标文件放在 `src\u002Ficons\u002Fsvg` 目录下\r\n> 2. 在项目中直接使用 `\u003Csvg-icon name=\"svg图标文件命名\" \u002F>` 即可\r\n\r\n例如：\r\n\r\n本项目 `src\u002Ficons\u002Fsvg` 中放了个叫 `check-in.svg` 的图标文件，然后在组件 `name` 属性中填入文件的命名即可，So easy~\r\n\r\n```Vue\r\n\u003Csvg-icon name=\"check-in\" \u002F>\r\n```\r\n\r\n> 项目中使用了 `unplugin-vue-components` 自动引入组件，所以 `main.ts` 中无需注册全局图标组件。\r\n\r\n### \u003Cspan id=\"router\">路由缓存 & 命名注意 ⚠\u003C\u002Fspan>\r\n\r\n组件默认开启缓存，如某个组件需关闭缓存，在对应路由 `meta` 内的 `noCache` 字段赋值为 `true` 即可。\r\n\r\n```typescript\r\n\u002F\u002F src\u002Frouter\u002Froutes.ts\r\nconst routes: Array\u003CRouteRecordRaw> = [\r\n  \u002F\u002F ...\r\n  {\r\n    path: 'about',\r\n    name: 'About',\r\n    component: () => import('@\u002Fviews\u002Fabout\u002Findex.vue'),\r\n    meta: {\r\n      title: '关于',\r\n      noCache: true\r\n    }\r\n  }\r\n]\r\n```\r\n\r\n 为了保证页面能被正确缓存，请确保**组件**的 `name` 值和对应路由的 `name` 命名完全相同。\r\n\r\n```vue\r\n\u003C!-- src\u002Fviews\u002Fabout\u002Findex.vue -->\r\n\u003Cscript setup lang=\"ts\">\r\n\u002F\u002F Vue3.3+ defineOptions 宏\r\ndefineOptions({\r\n  name: 'About'\r\n})\r\n\u003C\u002Fscript>\r\n\r\n\u003Ctemplate>\r\n  \u003Cdiv>about\u003C\u002Fdiv>\r\n\u003C\u002Ftemplate>\r\n```\r\n\r\n### \u003Cspan id=\"console\">调试面板 eruda\u003C\u002Fspan>\r\n\r\n![](docs\u002Fassets\u002Fimg\u002FSnipaste_2023-05-04_21-58-28.png)\r\n\r\n为了方便移动端查看 log 信息和调试，开发环境引入了 eruda 调试面板的 cdn。如果你的开发环境不需要的话请在 `.env.development` 中修改值\r\n\r\n```html\r\n# .env.development\r\n\r\n# 开发环境启用 cdn eruda 调试工具。若不启用，将 true 修改为 false 或其他任意值即可\r\nVITE_ENABLE_ERUDA = \"true\"\r\n```\r\n\r\n### \u003Cspan id=\"page-title\">动态设置页面标题\u003C\u002Fspan>\r\n\r\n在路由全局前置守卫中：\r\n\r\n```ts\r\n\u002F\u002F src\u002Frouter\u002Findex.ts\r\n\u002F\u002F ...\r\nrouter.beforeEach((to: ToRouteType, from, next) => {\r\n  \u002F\u002F ...\r\n  \u002F\u002F 页面 title\r\n  setPageTitle(to.meta.title)\r\n  next()\r\n})\r\n```\r\n\r\n具体实现方法见文件 `src\u002Futils\u002Fset-page-title.ts` 。\r\n\r\n### \u003Cspan id=\"mock\">开发环境 Mock\u003C\u002Fspan>\r\n\r\n> 本项目开发环境支持 mock 请求数据，在 `mock` 目录中可配置接口和数据，具体见[文档](https:\u002F\u002Fgithub.com\u002Fpengzhanbo\u002Fvite-plugin-mock-dev-server\u002Fblob\u002Fmain\u002FREADME.zh-CN.md)。\r\n\r\n### \u003Cspan id=\"viewport\">vw 视口适配\u003C\u002Fspan>\r\n\r\n使用 `cnjm-postcss-px-to-viewport` 进行视口适配，相关配置见项目根目录下 `postcss.config.js`。\r\n\r\n```js\r\n\u002F\u002F postcss.config.js\r\nmodule.exports = {\r\n  plugins: {\r\n    \u002F\u002F 使用 cnjm-postcss-px-to-viewport 规避 postcss.plugin was deprecated 警告\r\n    'cnjm-postcss-px-to-viewport': {\r\n      viewportWidth: 375, \u002F\u002F 根据设计稿设定\r\n      minPixelValue: 1, \u002F\u002F 最小的转换数值\r\n      unitPrecision: 2 \u002F\u002F 转化精度，转换后保留位数\r\n    },\r\n    'autoprefixer': {\r\n      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### \u003Cspan id=\"tailwindcss\">Tailwindcss 原子类框架\u003C\u002Fspan>\r\n\r\nTailwindcss 从 3.0 版本开始默认使用 `JIT` 模式，打包代码不再臃肿，结合 `vite` 使用非常香~ 如果你还没使用过类似的框架，Tailwindcss 首页的[示例](https:\u002F\u002Ftailwindcss.com\u002F)非常直观。\r\n\r\n官方文档：https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fpadding\r\n\r\n### \u003Cspan id=\"git\">Git 提交信息规范\u003C\u002Fspan>\r\n\r\n项目使用 `husky` 规范 Git 提交信息，遵循社区主流的 [Angular](https:\u002F\u002Fgithub.com\u002Fconventional-changelog\u002Fconventional-changelog\u002Ftree\u002Fmaster\u002Fpackages\u002Fconventional-changelog-angular) 规范。\r\n\r\n```\r\nfeat 增加新功能\r\nfix 修复问题\u002FBUG\r\nstyle 代码风格相关无影响运行结果的\r\nperf 优化\u002F性能提升\r\nrefactor 重构\r\nrevert 撤销修改\r\ntest 测试相关\r\ndocs 文档\u002F注释\r\nchore 依赖更新\u002F脚手架配置修改等\r\nworkflow 工作流改进\r\nci 持续集成\r\ntypes 类型定义文件更改\r\nwip 开发中\r\n```\r\n\r\n```\r\n\u002F\u002F 格式\r\n\u003Ctype>(\u003Cscope>): \u003Csubject>\r\n\u002F\u002F 示例\r\nfeat(layout): 布局完成\r\n```\r\n\r\n### \u003Cspan id=\"CDN\">CDN 生产环境依赖\u003C\u002Fspan>\r\n\r\n本模板生产环境默认不开启 CDN 加载依赖，如需开启生产环境加载 CDN 依赖，在根目录生产环境变量文件 `.env.production` 中修改 `VITE_CDN_DEPS` 的值为 `true` 重新打包即可。\r\n\r\n## 捐赠\r\n\r\n如果本项目对你有所帮助，可以考虑赞赏一下作者 : D\r\n\r\n\u003Cdiv align=\"center\">\r\n\t\u003Cimg src=\"docs\u002Fassets\u002Fimg\u002Fdonate.png\" alt=\"donate\" style=\"width:50%;\" \u002F>\r\n\u003C\u002Fdiv>\r\n\r\n## 鸣谢\r\n\r\n [vue-element-admin](https:\u002F\u002Fgithub.com\u002FPanJiaChen\u002Fvue-element-admin)\r\n\r\n [vant-demo](https:\u002F\u002Fgithub.com\u002Fyouzan\u002Fvant-demo)\r\n\r\n [vue-pure-admin](https:\u002F\u002Fgithub.com\u002Fxiaoxian521\u002Fvue-pure-admin)\r\n\r\n [vue-vben-admin](https:\u002F\u002Fgithub.com\u002Fvbenjs\u002Fvue-vben-admin)\r\n\r\nFont Awesome Solid 图标由 [Dave Gandy](https:\u002F\u002Fgithub.com\u002FFortAwesome\u002FFont-Awesome) 创作，基于 [CC BY 4.0](https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F) 许可发布。\r\n\r\n## License\r\n\r\n[MIT license](https:\u002F\u002Fgithub.com\u002Fyulimchen\u002Fvue3-h5-template\u002Fblob\u002Fmaster\u002FLICENSE).\r\n","该项目是一个基于Vue3、Vite和Vant构建的移动端H5项目基础模板，旨在提供开箱即用的开发体验。它集成了TypeScript\u002FJavaScript、Tailwindcss等现代前端技术栈，具备多种图标方案集成、Pinia状态管理、深色模式支持及i18n国际化等功能特性。此外，该模板还支持视口适配、打包资源压缩、Mock数据支持等实用功能，并遵循ESLint代码规范。适用于需要快速搭建高质量移动Web应用的各种场景，无论是个人开发者还是团队项目都能从中受益。",2,"2026-06-11 03:20:14","top_language"]