{"id":21221957,"url":"https://github.com/leedom92/vue-h5-template","last_synced_at":"2025-07-10T13:33:03.550Z","repository":{"id":63505748,"uuid":"363710241","full_name":"leedom92/vue-h5-template","owner":"leedom92","description":"🍰「Vue移动端项目模版」Vue 3 + Vite + Vue Router + Vitest + Pinia + Vant + Tailwindcss +  Sass + ESLint + Stylelint + CSpell","archived":false,"fork":false,"pushed_at":"2025-06-01T03:04:48.000Z","size":2285,"stargazers_count":6,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-05T18:08:38.225Z","etag":null,"topics":["cspell","eslint","stylelint","tailwindcss","template","vant","vite","vitest","vue","vue-h5-template","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-h5-template.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leedom92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-02T17:28:54.000Z","updated_at":"2025-06-01T03:04:45.000Z","dependencies_parsed_at":"2024-03-13T17:25:36.564Z","dependency_job_id":"caa159ba-6519-4753-8b92-2c69c410cb2b","html_url":"https://github.com/leedom92/vue-h5-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/leedom92/vue-h5-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leedom92%2Fvue-h5-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leedom92%2Fvue-h5-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leedom92%2Fvue-h5-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leedom92%2Fvue-h5-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leedom92","download_url":"https://codeload.github.com/leedom92/vue-h5-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leedom92%2Fvue-h5-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264585371,"owners_count":23632646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cspell","eslint","stylelint","tailwindcss","template","vant","vite","vitest","vue","vue-h5-template","vuejs"],"created_at":"2024-11-20T22:37:16.660Z","updated_at":"2025-07-10T13:33:03.544Z","avatar_url":"https://github.com/leedom92.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-h5-template\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vuejs/core\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vue-3.5.13-brightgreen.svg\" alt=\"vue\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/youzan/vant\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vant-4.9.19-brightgreen.svg\" alt=\"element-ui\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/leedom92/vue-h5-template/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/mashape/apistatus.svg\" alt=\"license\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n🍰「Vue移动端项目模版」 Vue 3 + Vite + Vue Router + Vitest + Vant + Tailwindcss + Sass + NProgress + ESLint + Stylelint + CSpell\n\n若您习惯 `vue 2` + `vite` 开发，请[戳这里](https://github.com/leedom92/vue-h5-template/tree/vue2-h5-vite-template)传送\n\n若您习惯 `vue 2` + `webpack` 开发，请[戳这里](https://github.com/leedom92/vue-h5-template/tree/vue-h5-webpack-template)传送\n\n## Demo\n\n[Click here](https://vue-h5-template.netlify.app)\n\n## Installation\n\n```bash\n# .git folder is removed automatically\nnpx degit leedom92/vue-h5-template my-project\n\ncd my-project\n\npnpm i # If you don't have pnpm installed, run: npm install -g pnpm\n\npnpm dev\n```\n\n## \u003cspan id=\"todo-list\"\u003eTodo List\u003c/span\u003e\n\n- [x] Vue 3\n- [x] Vite\n- [x] Vue Router\n- [x] Vitest\n- [x] Pinia\n- [x] Vant\n  - [x] [组件按需加载](#unplugin-vue-components)\n- [x] [api自动导入](#unplugin-auto-import)\n- [x] Tailwindcss\n- [x] NProgress.js进度条\n  - [x] [NProgress颜色自定义](#nprogress)\n- ~~animate.css动画库~~\n- [x] Sass\n- [x] [Alias别名](#alias)\n- [x] [Axios封装](#axios)\n- [x] [ESLint](#standard)\n- [x] [Stylelint](#stylelint)\n- [x] [打包移除console和debugger](#drop)\n- [x] [CSpell英文拼写问题检查](#cspell)\n- [x] 提交代码 `eslint` 检测，并自动修复\n\n\u003e 去掉了 `animate.css` 依赖，我觉得该动画库对页面而言只是锦上添花，该项目作为模版，无需过多的可有可无的功能。\n\u003e 若页面跳转需要有过渡效果，可以一用。\n\n### \u003cspan id=\"unplugin-vue-components\"\u003e组件按需加载\u003c/span\u003e\n\n1. 安装插件\n\n``` sh\n# 通过 pnpm 安装 unplugin-vue-components\npnpm add unplugin-vue-components -D\n```\n\n2. 配置插件\n\n```js\n// vite.config.js\nimport vue from '@vitejs/plugin-vue';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from 'unplugin-vue-components/resolvers';\n\nexport default {\n  plugins: [\n    vue(),\n    Components({\n      resolvers: [VantResolver()],\n    }),\n  ],\n};\n\n```\n\n### \u003cspan id=\"unplugin-auto-import\"\u003eapi自动导入\u003c/span\u003e\n\n1. 安装插件\n\n``` sh\n# 通过 pnpm 安装 unplugin-auto-import\npnpm add unplugin-auto-import -D\n```\n\n2. 配置插件\n\n```js\n// vite.config.js\nimport AutoImport from 'unplugin-auto-import/vite'\n\nexport default {\n  plugins: [\n    AutoImport({\n      imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue生态库相关api\n    }),\n  ],\n};\n\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"nprogress\"\u003eNProgress颜色自定义\u003c/span\u003e\n\n``` css\n/* assets/styles/vars.css 修改颜色即可 */\n:root {\n  --nprogress-color: #40b982;\n}\n\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"alias\"\u003ealias别名\u003c/span\u003e\n\n``` js\n// vite.config.js\nimport { fileURLToPath, URL } from 'node:url'\nimport { defineConfig } from 'vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@': fileURLToPath(new URL('./src', import.meta.url)),\n      '_a': fileURLToPath(new URL('./src/api', import.meta.url)),\n      '_c': fileURLToPath(new URL('./src/components', import.meta.url)),\n      '_i': fileURLToPath(new URL('./src/assets/images', import.meta.url)),\n      '_u': fileURLToPath(new URL('./src/utils', import.meta.url)),\n    }\n  }\n})\n\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"axios\"\u003eAxios封装\u003c/span\u003e\n\n``` js\n// src/utils/request.js\nservice.interceptors.request.use( // 请求拦截器\n  (config) =\u003e {\n\n    // headers中加入token验证\n    config.headers['Authorization'] = ''\n\n    return config\n  },\n  (error) =\u003e {\n    return Promise.reject(error)\n  }\n)\n\nservice.interceptors.response.use( // 响应拦截器\n  (response) =\u003e {\n    const res = response.data\n    // 根据接口返回的状态码判断\n    if (+res.code === 200) {\n      return res\n    } else {\n      ...\n    }\n  },\n  (error) =\u003e {\n    ...\n  }\n)\n\n// src/api/*.js\nexport function login(params) {\n  return request({\n    loading: true, // 是否显示loading\n    url: '/login', // 接口地址\n    methods: 'post', // 请求方式\n    ...params // 请求参数\n  })\n}\n\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"standard\"\u003eESLint 统一开发规范\u003c/span\u003e\n\n\u003e 使用 [`@leedomjs/eslint-config`](https://www.npmjs.com/package/@leedomjs/eslint-config) 作为ESLint默认配置\n\n``` js\n// .eslintrc.cjs 可自定义规则\nmodule.exports = {\n  extends: \"@leedomjs\"\n  // 自定义规则\n  rules: {\n    \n  }\n}\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"stylelint\"\u003eStylelint 统一开发规范\u003c/span\u003e\n\n\u003e 使用 [`@leedomjs/stylelint-config`](https://www.npmjs.com/package/@leedomjs/stylelint-config) 作为stylelint默认配置\n\n``` js\n// .stylelintrc.cjs 可自定义规则\nmodule.exports = {\n  extends: \"@leedomjs/stylelint-config\"\n  // 自定义规则\n  rules: {\n    \n  }\n}\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"drop\"\u003e打包移除console和debugger\u003c/span\u003e\n\n``` js\n/**\n * vite.config.js\n * 打包默认使用 'esbuild'， 可选 'terser'\n * 有以下两种方法可在生产环境移除console和debugger\n */\n\n// 1. build via esbuild\nexport default defineConfig(({ command }) =\u003e {\n  return {\n    esbuild: {\n      drop: command === 'build' ? ['console', 'debugger'] : []\n    }\n  }\n})\n\n// 2. build via terser\nexport default defineConfig({\n  build: {\n    minify: 'terser',\n    terserOptions: {\n      compress: {\n        drop_console: true,\n        drop_debugger: true,\n      }\n    }\n  }\n})\n```\n\n**[🔝](#todo-list)**\n\n### \u003cspan id=\"cspell\"\u003e检查英文拼写\u003c/span\u003e\n\n\u003e 在提交代码触发pre-commit钩子的时候会检查主要代码中的英文拼写\n\u003e\n\u003e你也可以提前运行以下命令来检查拼写问题\n\n``` bash\npnpm check:spell\n```\n\n**[🔝](#todo-list)**\n\n### 在 `tailwindcss.config.js` 中添加vant-ui的基本色\n\n\u003e [!NOTE] \n\u003e 使用了 [tailwindcss-color-preset](https://www.npmjs.com/package/@leedomjs/tailwindcss-color-preset) 作为预设。\n\u003e\n\u003e 用法：以 `van` 为关键字，还提供两个渐变色，基本主题色名称请参考 [`van-button`](https://vant-contrib.gitee.io/vant/#/zh-CN/button) 的类型颜色， 例如 `primary`。\n\n```vue\n\u003cdiv class=\"text-van-primary bg-van-gradient-red\"\u003evue\u003c/div\u003e\n\u003cdiv class=\"bg-van-success bg-van-gradient-orange\"\u003evite\u003c/div\u003e\n```\n\n\n## License\n\n[MIT](https://github.com/leedom92/vue-h5-template/blob/main/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleedom92%2Fvue-h5-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleedom92%2Fvue-h5-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleedom92%2Fvue-h5-template/lists"}