{"id":28657626,"url":"https://github.com/oyjt/uniapp-vue3-template","last_synced_at":"2025-06-13T09:13:37.790Z","repository":{"id":186794988,"uuid":"675772757","full_name":"oyjt/uniapp-vue3-template","owner":"oyjt","description":"使用uniapp+vite+vue3+typescript+uview-plus+unocss 搭建的适合团队协作的快速开发模版","archived":false,"fork":false,"pushed_at":"2025-06-01T02:27:27.000Z","size":7899,"stargazers_count":418,"open_issues_count":3,"forks_count":95,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-01T12:22:53.170Z","etag":null,"topics":["typescript","uniapp","unocss","uview-plus","vite","vue3"],"latest_commit_sha":null,"homepage":"http://icnpath.com/uniapp-vue3-template/","language":"TypeScript","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/oyjt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2023-08-07T17:27:35.000Z","updated_at":"2025-06-01T02:26:04.000Z","dependencies_parsed_at":"2023-09-21T23:59:14.485Z","dependency_job_id":"13a19da5-8b44-4f6a-a4f8-8bf872e13314","html_url":"https://github.com/oyjt/uniapp-vue3-template","commit_stats":null,"previous_names":["oyjt/uniapp-vue3-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/oyjt/uniapp-vue3-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyjt%2Funiapp-vue3-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyjt%2Funiapp-vue3-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyjt%2Funiapp-vue3-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyjt%2Funiapp-vue3-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oyjt","download_url":"https://codeload.github.com/oyjt/uniapp-vue3-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oyjt%2Funiapp-vue3-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259616403,"owners_count":22884887,"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":["typescript","uniapp","unocss","uview-plus","vite","vue3"],"created_at":"2025-06-13T09:13:36.350Z","updated_at":"2025-06-13T09:13:37.759Z","avatar_url":"https://github.com/oyjt.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# uniapp 团队协作开发实践模板(Vue3)\n\n[![GitHub Repo stars](https://img.shields.io/github/stars/oyjt/uniapp-vue3-template?style=flat\u0026logo=github)](https://github.com/oyjt/uniapp-vue3-template)\n[![GitHub forks](https://img.shields.io/github/forks/oyjt/uniapp-vue3-template?style=flat\u0026logo=github)](https://github.com/oyjt/uniapp-vue3-template)\n[![node version](https://img.shields.io/badge/node-%3E%3D18-green)](https://github.com/oyjt/uniapp-vue3-template)\n[![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D8-green)](https://github.com/oyjt/uniapp-vue3-template)\n[![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/oyjt/uniapp-vue3-template)](https://github.com/oyjt/uniapp-vue3-template)\n[![GitHub License](https://img.shields.io/github/license/oyjt/uniapp-vue3-template)](https://github.com/oyjt/uniapp-vue3-template)\n\n\n使用uniapp+vite+vue3+typescript+uview-plus+unocss 搭建的适合团队协作的快速开发模版\n\n[uview-plus官方文档](https://uiadmin.net/uview-plus/)\n\n本项目集众多项目的优点，打造最适合团队协作开发的项目模板。\n\n国内仓库地址：[https://gitee.com/ouyang/uniapp-vue3-template](https://gitee.com/ouyang/uniapp-vue3-template)\n\n在线预览地址：[https://oyjt.github.io/uniapp-vue3-template/](https://oyjt.github.io/uniapp-vue3-template/)\n\n### 特性\n\n- [x] 集成`uview-plus3.0 ui`库\n- [x] 支持多环境打包构建\n- [x] 使用`pinia`状态管理\n- [x] 封装网络请求，并支持`Typescript`\n- [x] 支持路径别名\n- [x] 支持自动加载组件和`API`\n- [x] 自动校验`git`提交代码格式\n- [x] 集成`ESLint`、`StyleLint`、`EditorConfig`代码格式规范\n- [x] `Typescript`支持\n- [x] 集成`UnoCSS`\n- [x] 集成`iconify`图标库\n- [x] 集成`z-paging`下拉刷新功能\n- [x] 添加页面跳转拦截，登录权限校验\n- [x] 支持`token`无感刷新\n- [x] 项目分包\n- [x] 集成小程序隐私协议授权组件\n- [x] 项目构建自动删除本地图片并替换本地图片路径为线上图片\n- [x] 集成包体积视图分析插件\n- [x] 支持国际化\n- [x] 集成`alova`网络请求（具体使用请切换到 [feature/alova](https://github.com/oyjt/uniapp-vue3-template/tree/feature/alova) 分支）\n- [x] 集成`axios`网络请求（具体使用请切换到 [feature/axios](https://github.com/oyjt/uniapp-vue3-template/tree/feature/axios) 分支）\n- [x] 支持新的`wot-design-uni`库（具体使用请切换到[feature/wot-design-uni](https://github.com/oyjt/uniapp-vue3-template/tree/feature/wot-design-uni)分支），[wot-design-uni官方文档](https://wot-design-uni.cn/)\n- [x] 支持新的`shadcn-ui`库（具体使用请切换到[feature/shadcn-ui](https://github.com/oyjt/uniapp-vue3-template/tree/feature/shadcn-ui)分支），[shadcn-ui官方文档](https://ui.shadcn.com/)\n\n### uniapp插件推荐\n- [uniapp 插件精选（https://github.com/oyjt/awesome-uniapp）](https://github.com/oyjt/awesome-uniapp)\n\n### 目录结构\n项目中采用目前最新的技术方案来实现，目录结构清晰。\n```\nuniapp-vue3-project\n├ build                 vite配置统一管理\n│  ├ config\n│  └ plugins\n├ env                   环境变量\n├ scripts               一些脚本\n│  ├ post-upgrade.js     依赖库清理\n│  └ verify-commit.js    git提交检验\n├ src\n│  ├ api                接口管理\n│  ├ components         公共组件\n│  ├ hooks              常用hooks封装\n│  ├ locale             国际化语言管理\n│  ├ pages              页面管理\n│  ├ plugins            插件管理\n│  ├ router             路由管理\n│  ├ static             静态资源\n│  ├ store              状态管理\n│  ├ utils              一些工具\n│  ├ App.vue\n│  ├ main.ts\n│  ├ manifest.json      项目配置\n│  ├ pages.json         页面配置\n│  └ uni.scss           全局scss变量\n├ types                 全局typescript类型文件\n│  ├ auto-imports.d.ts\n│  ├ components.d.ts\n│  ├ global.d.ts\n│  └ module.d.ts\n├ LICENSE\n├ README.md\n├ cz.config.js          cz-git配置\n├ eslint.config.js      eslint配置\n├ index.html\n├ package.json\n├ pnpm-lock.yaml\n├ stylelint.config.js   stylelint配置\n├ tsconfig.json\n├ uno.config.ts         unocss配置\n└ vite.config.ts        vite配置\n```\n\n#### vite插件管理\n```\nbuild\n├ config            vite配置\n│  ├ index.ts       入口文件\n│  └ proxy.ts       跨域代理配置\n└ plugins           vite插件\n   ├ autoImport.ts  自动导入api\n   ├ cleanImage.ts  自动清理图片文件\n   ├ component.ts   自动导入组件\n   ├ index.ts       入口文件\n   ├ replaceUrl.ts  自动替换图片地址为CDN地址\n   ├ unocss.ts      unocss配置\n   └ visualizer.ts  包体积视图分析\n\n```\n\n#### 接口管理\n```\napi\n├ common       通用api\n│  ├ index.ts\n│  └ types.ts\n├ user         用户相关api\n│  ├ index.ts\n│  └ types.ts\n└ index.ts     入口文件\n```\n\n#### hooks管理\n```\nhooks\n├ use-clipboard  剪切板\n│  └ index.ts\n├ use-loading    loading\n│  └ index.ts\n├ use-modal      模态框\n│  └ index.ts\n├ use-permission 校验权限\n│  └ index.ts\n├ use-share      分享\n│  └ index.ts\n└ index.ts       入口文件\n```\n\n### 页面管理\n```\npages\n├ common           公共页面（分包common）\n│  ├ login\n│  │  └ index.vue\n│  └ webview\n│     └ index.vue\n└ tab              主页面（主包）\n   ├ home\n   │  └ index.vue\n   ├ list\n   │  └ index.vue\n   └ user\n      └ index.vue\n```\n\n#### 状态管理\n```\nstore\n├ modules\n│  ├ app          app状态\n│  │  ├ index.ts\n│  │  └ types.ts\n│  └ user         用户状态\n│     ├ index.ts\n│     └ types.ts\n└ index.ts        入口文件\n```\n\n### 工具方法\n```\nutils\n├ auth                token相关方法\n│  └ index.ts\n├ common              通用方法\n│  └ index.ts\n├ modals              弹窗相关方法\n│  └ index.ts\n├ request             网络请求相关方法\n│  ├ index.ts\n│  ├ interceptors.ts\n│  ├ status.ts\n│  └ types.ts\n└ index.ts            入口文件\n```\n\n### 使用方法\n\n```bash\n# 安装依赖\npnpm install\n\n# 启动H5\npnpm dev:h5\n\n# 启动微信小程序\npnpm dev:mp-weixin\n```\n\n### 发布\n\n```bash\n# 构建开发环境\npnpm build:h5\npnpm build:mp-weixin\n\n# 构建测试环境\npnpm build:h5-test\npnpm build:mp-weixin-test\n\n# 构建生产环境\npnpm build:h5-prod\npnpm build:mp-weixin-prod\n```\n\n### 代码提交\n```bash\npnpm cz\n```\n\n### 更新uniapp版本\n\n更新uniapp相关依赖到最新正式版\n```bash\nnpx @dcloudio/uvm@latest\n```\n或者执行下面的命令\n```bash\npnpm uvm\n```\n\n在升级完后，会自动添加很多无用依赖，执行下面的代码减小保体积\n```\npnpm uvm-rm\n```\n\n### `v3` 代码块\n在 `vue` 文件中，输入 `v3` 按 `tab` 即可快速生成页面模板，可以大大加快页面生成。\n\u003e 原理：基于 VSCode 代码块生成。\n\n### 登录鉴权\n1. 页面如果需要登录才能访问，只需在 `pages.json` 文件中需要鉴权的页面下设置 `needLogin` 属性设置为 `true` 即可，比如\n```\n{\n  \"pages\": [\n    {\n      \"path\": \"pages/test/test\",\n      \"needLogin\": true,\n      \"style\": {\n        \"navigationBarTitleText\": \"\",\n      },\n    }\n  ]\n}\n```\n\n2. 如果有`tab`页面需要登录才能访问，上面的设置在小程序中点击`tabbar`时无效，因为在小程序中点击tabbar不会触发`uni.switchTab`方法，下面是官方给出的回复及解决方案。\n\n\u003e 拦截uni.switchTab本身没有问题。但是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。所以误认为拦截无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。\n\n可参考`pages/tab/user/index.vue`中的代码，核心代码如下：\n```\n\u003cscript setup lang=\"ts\"\u003e\n// 引入鉴权hooks\nimport { usePermission } from \"@/hooks\";\n\nonShow(async () =\u003e {\n  console.log(\"tabbar page onShow\");\n  const hasPermission = await usePermission();\n  console.log(hasPermission ? \"已登录\" : \"未登录，拦截跳转\");\n});\n\u003c/script\u003e\n```\n\n### 注意事项\n1. 微信小程序开发者工具中内置的打包分析不准确，本项目使用了`rollup-plugin-visualizer`来分析小程序包体积，默认不开启，有需要的移除相关注释即可\n2. 自动构建处理本地图片资源，使用了`vite-plugin-clean-build`和`vite-plugin-replace-image-url`这两个插件，默认不开启相关功能，如果需要使用再`build/vite/plugins/index.ts`文件中移除相关注释即可\n3. 使用`vite-plugin-replace-image-url`插件，想要图片自动替换生效，需要在项目中使用绝对路径引入图片资源，如下示例所示。\n\n    示例一：style中的图片使用\n    ```\n    \u003ctemplate\u003e\n      \u003cview :style=\"`background-image: url('${bgImg}')`\"\u003e\n        ...\n      \u003c/view\u003e\n    \u003c/template\u003e\n    \u003cscript setup lang=\"ts\"\u003e\n    import bgImg from '@/static/images/bg_img.png';\n    \u003c/script\u003e\n    ```\n\n    示例二：js中的图片使用\n\n    ```\n    \u003cscript setup lang=\"ts\"\u003e\n    import walletIcon from '@/static/images/icon_wallet.png';\n    const menuList = [\n      {\n        name: 'wallet',\n        title: '钱包',\n        icon: walletIcon,\n      },\n      ...\n    ];\n    \u003c/script\u003e\n    ```\n\n    示例二：css中的图片使用\n    ```\n    \u003cstyle lang=\"scss\"\u003e\n    .icon {\n      background-image: url('@/static/images/icon.png')\n    }\n    \u003c/style\u003e\n    ```\n\n4. 部分用户构建微信小程序如下错误，原因是微信开发者工具缺失了对应的依赖。\n```\nThis @babel/plugin-proposal-private-property-in-object version is not meant to\nbe imported.\n```\n此时升级微信开发者工具，或者安装`@babel/plugin-proposal-private-property-in-object`依赖即可解决问题。\n\n5. `shadcn-ui` 分支采用最新的 `tailwindcss v4.1` 版本，因为现阶段的 `unocss` 对于最新版 `tailwindcss` 支持还不够完善。\n`shadcn-ui`并不太适合移动端使用，如果不喜欢可以移除，只保留纯净的框架。\n\n### 捐赠\n\n如果你觉得这个项目对你有帮助，你可以请作者喝饮料🍹\n\n\u003cp align='center'\u003e\n\u003cimg alt=\"微信收款码\" src=\"./src/static/images/pay.png\" height=\"330\" style=\"display:inline-block; height:330px;\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foyjt%2Funiapp-vue3-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foyjt%2Funiapp-vue3-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foyjt%2Funiapp-vue3-template/lists"}