{"id":19042678,"url":"https://github.com/viarotel-org/vite-uniapp-template","last_synced_at":"2025-04-05T22:08:57.244Z","repository":{"id":70480709,"uuid":"585389337","full_name":"viarotel-org/vite-uniapp-template","owner":"viarotel-org","description":"🚀 基于 vitejs 驱动的 uniapp 最佳实践集成模板","archived":false,"fork":false,"pushed_at":"2024-03-06T09:43:46.000Z","size":1831,"stargazers_count":352,"open_issues_count":5,"forks_count":71,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-29T21:04:55.234Z","etag":null,"topics":["applet","axios","pinia","template","uniapp","unocss","vite","vue-router","vue3"],"latest_commit_sha":null,"homepage":"https://vite-uniapp-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/viarotel-org.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-01-05T03:29:38.000Z","updated_at":"2025-03-29T08:43:49.000Z","dependencies_parsed_at":"2023-03-03T05:15:38.758Z","dependency_job_id":"d44779fd-fb09-48ae-9115-352befe9cbc7","html_url":"https://github.com/viarotel-org/vite-uniapp-template","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viarotel-org%2Fvite-uniapp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viarotel-org%2Fvite-uniapp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viarotel-org%2Fvite-uniapp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viarotel-org%2Fvite-uniapp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viarotel-org","download_url":"https://codeload.github.com/viarotel-org/vite-uniapp-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406091,"owners_count":20933803,"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":["applet","axios","pinia","template","uniapp","unocss","vite","vue-router","vue3"],"created_at":"2024-11-08T22:38:37.617Z","updated_at":"2025-04-05T22:08:57.212Z","avatar_url":"https://github.com/viarotel-org.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vite-uniapp-template\n\n🚀 基于 vitejs 驱动的 uniapp 最佳实践集成模板 [查看演示](https://vite-uniapp-template.netlify.app/)\n\n## 特点\n\n- 💪 Assets: 提供了全局静态资源加载工具，无感切换加载本地静态资源/远程静态资源，解决小程序环境下包大小限制问题。\n- 📦 SubPackages: 符合心智模型的分包风格，合理的 pages 目录结构，与分包配置轻松实现功能分包。\n- 🛣 Router: 使用 [uniapp-router-next](https://gitee.com/wen-jason/uni-router/tree/main/packages/uniapp-router-next)，并通过优化封装，API 同 VueRouter 类似，扩展了拦截器、中间件、路由别名功能。\n- 📊 Store: 使用 [Pinia](https://pinia.vuejs.org/zh/) 强力驱动，轻松实现应用状态管理。\n- ⚡️ Request: 请求库使用 [uni-network](https://github.com/uni-helper/uni-network) 完全基于 uniapp API 编写的高性能请求库， API 同 axios。\n- 👇 Z-paging: 内置了高性能且易于使用的业务常用下拉分页组件模块，轻松实现下拉刷新、上拉加载等功能。\n- 💅 Unocss: 使用原子化 CSS 引擎，小程序环境下依然完美支持原子化的 class 命名书写规则。\n- 🎨 UI-libs: 预设了 [uv-ui](https://www.uvui.cn/) 和 [uni-ui](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html) 两者相辅相成，轻松满足绝大多数业务场景，并支持主题色定制功能。\n- 📝 NoTs: 只使用 JavaScript，在常规业务场景或人员水平差距过大情况下，TypeScript 并不会提升开发体验。\n\n## 使用方法\n\n### 克隆项目\n\n```shell\ngit clone https://github.com/viarotel/vite-uniapp-template.git\n```\n\n### 安装项目依赖\n\n\u003e 打开并进入克隆的项目根目录下执行以下命令\n\u003e 以下命令推荐 使用 pnpm 进行操作 不过你依然可以使用 npm/yarn\n\n```shell\npnpm install\n```\n\n### 运行项目\n\n#### 任意编辑器直接运行本项目\n\n```shell\n# h5端\npnpm dev:h5\n# 微信小程序端\npnpm dev:mp-weixin\n# 安卓端\npnpm dev:app-android\n#... 更多端请参阅 package.json/script\n```\n\n#### 在 HBuilder 中运行本项目\n\n1. 将项目拖动到 HBuilder 中\n2. 使用 pnpm install 安装好依赖\n3. 点击项目 /src 目录中的任意文件\n4. 点击编辑器上方点击运行选择需要运行的环境\n\n### 功能示例\n\n#### 静态资源处理\n\n```js\n// 使用远程静态资源\n// import { useAssets } from './utils/assets/remote'\n\n// 使用本地静态资源\nimport { useAssets } from './utils/assets/local'\n\n// 全局挂载\napp.config.globalProperties.$assets = useAssets\n\n// template中使用\n//  \u003cimg :src=\"$assets('/temp.png')\" /\u003e\n```\n\n#### 全局主题色定制\n\n\u003e 由 [unocss-preset-shades](https://github.com/viarotel-org/packages/tree/main/packages/unocss-preset-shades#readme) 提供支持\n\n```html\n\u003c!-- 设置文本色为主题色色调为 500 --\u003e\n\u003cdiv class=\"text-primary-500\"\u003e\u003c/div\u003e\n\u003c!-- 设置背景色为主题色色调为 500 --\u003e\n\u003cdiv class=\"bg-primary-500\"\u003e\u003c/div\u003e\n\u003c!-- 设置边框色为主题色色调为 500 --\u003e\n\u003cdiv class=\"border border-primary-500\"\u003e\u003c/div\u003e\n\u003c!-- 更多使用方式请参阅 https://tailwindcss.com/docs --\u003e\n```\n\n#### 请求后端数据\n\n\u003e 详细使用请参阅 [uni-network](https://github.com/uni-helper/uni-network)\n\n```js\nimport request from '@/utils/request/index.js'\n\n// GET\nrequest.get(\n  '/mock',\n  { id: 'mock-id' },\n  {\n    /* More option */\n  }\n)\n\n// POST\nrequest.post(\n  '/mock',\n  { id: 'mock-id' },\n  {\n    /* More option */\n  }\n)\n\n// Upload\nrequest.upload({\n  url: '/mock',\n  dataType: 'json',\n  headers: {\n    'content-type': 'multipart/form-data',\n  },\n})\n\n// Common\nrequest({\n  method: 'post',\n  url: '/mock',\n  data: {\n    id: 'mock-id',\n  },\n  headers: {\n    'content-type': 'application/json',\n  },\n})\n\n// 扩展方法\n\n// 继承于 request.post，请求头默认添加 'Content-Type': 'multipart/form-data'\nrequest.form(\n  '/mock',\n  { id: 'mock-id' },\n  {\n    /* More option */\n  }\n)\n\n// 继承于 request.post，请求头默认添加 'Content-Type': 'application/x-www-form-urlencoded'\nrequest.query(\n  '/mock',\n  { id: 'mock-id' },\n  {\n    /* More option */\n  }\n)\n```\n\n#### 路由间功能跳转\n\n```js\n// 跳转页面\nconst methods = {\n  routerDemo() {\n    this.$Router.push({\n      path: '/login',\n      query: {\n        id: 'id',\n      },\n    })\n    // 获取页面参数\n    this.$Route.query.id\n\n    // 关闭当前页面跳转到某个页面\n    this.$Router.replace('/login')\n    // 关闭所有打开的页面跳转到某个页面\n    this.$Router.replaceAll('/login')\n  },\n}\n\n// 为路由设置别名\n// pages.config.js 中\nconst aliasConfig = {\n  path: 'pages/login/index',\n  // 通过添加 aliasPath 字段\n  aliasPath: '/login',\n}\n```\n\n#### 使用路由守卫\n\n\u003e 位于 router/guards 中\n\n```js\nimport store from '@/store/index.js'\n\nconst homePath = '/pages/index/index'\nconst loginPath = '/pages/login/index'\n\nconst whiteList = [loginPath]\n\nexport default (router) =\u003e {\n  const userStore = store.useUserStore()\n\n  const loginRoute = to =\u003e ({\n    path: loginPath,\n    navType: 'reLaunch',\n    force: true,\n    query: {\n      redirect: {\n        path: to.path,\n        query: to.query,\n      },\n    },\n  })\n\n  router.beforeEach((to, from, next) =\u003e {\n    // console.log('permission.beforeEach.to', to)\n    // console.log('permission.beforeEach.from', from)\n\n    const token = userStore.token\n    const userId = userStore.userId\n\n    console.log('token', token)\n    console.log('userId', userId)\n\n    if (token) {\n      if (to.path === loginPath) {\n        next(homePath)\n      }\n      else if (userId) {\n        next()\n      }\n      else {\n        userStore\n          .getUserInfo()\n          .then(() =\u003e {\n            next()\n          })\n          .catch((error) =\u003e {\n            console.warn(error)\n            userStore.logout({ silenced: true })\n            next(loginRoute(to))\n          })\n      }\n    }\n    else if (whiteList.includes(to.path)) {\n      next()\n    }\n    else {\n      next(loginRoute(to))\n    }\n  })\n\n  router.afterEach(() =\u003e {})\n}\n```\n\n#### 使用基于路由的中间件\n\n\u003e pages.config.js 中\n\n```js\n// 使用名为 realname 的中间件\nconst pageConfig = {\n  path: '/pages/user/index',\n  aliasPath: '/user',\n  meta: {\n    middleware: ['realname'],\n  },\n}\n```\n\n定义中间件\n\n\u003e router/guards/index.js 中\n\n```js\n// 使用 defineMiddleware 定义并包装为中间件\nimport realname from './realname/index.js'\nimport { defineMiddleware } from '$uni-router/middleware'\n\nexport default (app, router) =\u003e {\n  // 使用 defineMiddleware 定义了路由中间件\n  defineMiddleware(realname, { router, app })\n}\n```\n\n编写路由中间件代码\n\n\u003e router/guards/realname/index.js 中\n\n```js\nimport store from '@/store/index.js'\nimport { useDialog, useToast } from '@/utils/modals'\n\nexport default (router) =\u003e {\n  const userStore = store.useUserStore()\n\n  router.beforeEach((to, from, next) =\u003e {\n    console.log('realname.beforeEach.to', to)\n    console.log('realname.beforeEach.from', from)\n\n    const realStatus = userStore.userInfo.realStatus\n\n    switch (realStatus) {\n      case 3:\n        next()\n        break\n      case 2:\n        useToast('实名审核中, 请稍后再试').then(() =\u003e {\n          next(false)\n        })\n        break\n      case 4:\n        useDialog(`${userStore.userInfo.auditResult || '提交的实名信息不符'}`, {\n          title: '实名失败',\n          showCancelButton: true,\n          confirmText: '重新认证',\n        })\n          .then(() =\u003e {\n            next({ path: '/pages/realname/index' })\n          })\n          .catch(() =\u003e {\n            next(false)\n          })\n        break\n      default:\n        useDialog('请先进行实名认证', { showCancelButton: true })\n          .then(() =\u003e {\n            next({ path: '/pages/realname/index' })\n          })\n          .catch(() =\u003e {\n            next(false)\n          })\n        break\n    }\n  })\n  // router.afterEach(() =\u003e {})\n}\n```\n\n### 主要使用的包\n\n- vitejs\n- uniapp\n- pinia\n- uview-plus\n- uni-ui\n- @uni-helper/uni-network\n- uniapp-router-next\n- z-paging\n- unocss\n- unocss-applet\n\n### 常见问题\n\n#### 无法正常安装依赖/无法启动\n\n删除 pnpm-lock.yaml / yarn.lock / package-lock.json 文件后重新安装依赖\n\n### 获得帮助\n\n\u003e 因为是开源项目 全靠爱发电 所以支持有限 更新节奏不固定\n\u003e\n\u003e 注意：非 BUG 或计划外的需求，有偿处理；至于金额，根据问题难易程度，你觉得帮助了多少，看着给吧（维护这些项目已经耗费了大量精力，还要免费花时间解答问题就说不过去了吧...所以白嫖的一律不通过。）\n\n- issues: [issues](https://github.com/viarotel-org/vite-uniapp-template/issues)\n- email: viarotel@qq.com\n- weixin: viarotel\n- qq: 523469508\n\n### 支持项目\n\n\u003e 如果该项目帮到你的话，可以请我喝杯咖啡，让我更有精神完善该项目 😛\n\n\u003cdiv style=\"display:flex;\"\u003e\n  \u003cimg src=\"https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79dcbc40246743e2b6870419e88e0392~tplv-k3u1fbpfcp-watermark.image?\" alt=\"payment-weixin\" style=\"width: 30%;\"\u003e\n  \u003cimg src=\"https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5e69b83dd746deade95afd4a6864ec~tplv-k3u1fbpfcp-watermark.image?\" alt=\"payment-alipay\" style=\"width: 30%;\"\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviarotel-org%2Fvite-uniapp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviarotel-org%2Fvite-uniapp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviarotel-org%2Fvite-uniapp-template/lists"}