# vite-uniapp-template **Repository Path**: SuHangWeb/vite-uniapp-template ## Basic Information - **Project Name**: vite-uniapp-template - **Description**: 基于 vitejs 驱动的 uniapp 集成模板 uni-simple-router + i18n + vite-plugin-mock-dev-server + Unocss + Pinia + uni-network - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: http://template.suhang.work/ - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-07-19 - **Last Updated**: 2025-06-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: template ## README # vite-uniapp-template 🚀 基于 vitejs 驱动的 uniapp 集成模板 ❗当前运行会报错 缺少路由拦截器组件， 出于对作者著作权的保护，插件包需自行购买并下载。 ## 特点 - 📦 SubPackages: 符合心智模型的分包风格，合理的 pages 目录结构，与分包配置轻松实现功能分包。 - 🛣 Router: 使用 [uni-simple-router](https://www.hhyang.cn/) ，并通过优化封装，扩展了拦截器、鉴权、路由别名、分包、h5页面切换动画、app退出应用提示等功能。❗出于对作者著作权的保护，插件包需自行购买并下载。 - 📊 Store: 使用 [Pinia](https://pinia.vuejs.org/zh/) 强力驱动，轻松实现应用状态管理，并且添加了数据持久化[pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)。 - 🛠️ 工具集: 使用[@uni-helper/uni-use](https://uni-helper.js.org/uni-use) uni-app (vue3) 组合式工具集。[函数列表](https://github.com/uni-helper/uni-use/blob/main/src/readme.md) - 🌏 i18n 国际化: 使用[@intlify/unplugin-vue-i18n](https://www.npmjs.com/package/@intlify/unplugin-vue-i18n) 结合[vue-i18n](https://www.npmjs.com/package/vue-i18n) 进行优化 以及响应式切换，❗微信小程序 tabbar 不支持动态修改内容，但是可以通过自定义tabbar的方式 [详细](https://uniapp.dcloud.net.cn/tutorial/i18n.html#miniprogram) - 🌐 Request: 请求库使用 [uni-network](https://uni-network.netlify.app/) 完全基于 uniapp API 编写的高性能请求库， API 同 axios。 - 🌐 Mock模拟数据: ❗微信小程序不支持模拟 可自行二次开发 例如[better-mock](https://www.npmjs.com/package/better-mock)。 - ⚡️ [vite-plugin-mock-dev-server](https://vite-plugin-mock-dev-server.netlify.app/): vite-plugin-mock-dev-server 专注于在 Vite 开发环境下 提供 Mock 服务。 通过 vite 内置的 http 和 http-proxy 服务，以 middleware 的方式，对 server.proxy 配置的代理路径 进行二次拦截，命中规则后，返回配置的 mock data 。 - ⚡️ [mockjs](http://mockjs.com/): 通过 mockjs 库生成 mock data，用来辅助vite-plugin-mock-dev-server。 - 👇 上拉加载、下拉刷新: 使用[z-paging](https://z-paging.zxlee.cn/)内置了高性能且易于使用的业务常用下拉分页组件模块，轻松实现下拉刷新、上拉加载等功能。 - 💅 Unocss: 使用原子化 CSS 引擎，小程序环境下依然完美支持原子化的 class 命名书写规则。 - 🎨 UI库: 轻松满足绝大多数业务场景 - 🎨 [uv-ui](https://www.uvui.cn/) 兼容 vue3+2、nvue、app、h5、小程序等多端基于 uni-app 和 uView2.x 的生态框架，支持单独导入，开箱即用。 - 🎨 [uni-ui 官方组件库](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html) DCloud 提供的一个跨端 ui 库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 ui 框架。 - 📝 NoTs: 在常见的业务场景以及人员水平差距甚为明显的情况下，TypeScript 不能提升开发体验，故而只是使用了 JavaScript 。 ## 使用案例 预览 use ## 使用方法 ### 克隆项目 ```shell git clone https://gitee.com/SuHangWeb/vite-uniapp-template.git ``` ### 安装项目依赖 > 打开并进入克隆的项目根目录下执行以下命令 > 以下命令推荐 使用 pnpm 进行操作 不过你依然可以使用 npm/yarn ```shell pnpm install ``` ### 运行项目 #### 任意编辑器直接运行本项目 ```shell # h5端 pnpm dev:h5 # 微信小程序端 pnpm dev:mp-weixin # 安卓端 pnpm dev:app-android #... 更多端请参阅 package.json/script ``` #### 在 HBuilder 中运行本项目 1. 将项目拖动到 HBuilder 中 2. 使用 pnpm install 安装好依赖 3. 点击项目 /src 目录中的任意文件 4. 点击编辑器上方点击运行选择需要运行的环境 ## 目录 ```base ┌─mock 数据模拟 ├─src 应用程序主要代码 │ ├─api api接口 │ ├─components 自定义组件 │ ├─hooks hooks │ ├─icons 独立封装的icon图标组件 全局注册 使用 阿里矢量图 │ ├─locale i18n国际化 语言包 │ ├─pages 主包 │ │ ├─use 使用案例 │ │ └─index 首页 │ ├─pages-auth 分包 - 授权方面 │ │ └─login 登录页面 │ ├─pages-errors 分包 - 错误方面 │ │ └─404 错误页面 │ ├─plugins 插件 │ │ ├─i18n 国际化配置 │ │ ├─uni-simple-router 路由 ！此插件需要自定购买下载 │ │ ├─uv-ui uv-ui组件库 │ │ ├─z-paging 上拉加载、下拉刷新 │ │ └─index.js 入口 - 统一管理插件 │ ├─router 路由 │ │ ├─other 其他使用配置 │ │ │ ├─app.js app │ │ │ ├─applet.js 小程序 │ │ │ └─h5.js h5切换页面动画 │ │ ├─routes 路由配置集合 │ │ │ ├─auth.js 授权方面 - 登录 │ │ │ ├─error.js 错误方面 - 404页面 │ │ │ └─user.js 用户方面 │ │ ├─routes.js 路由集合统一管理 │ │ └─index.js 入口 - 路由守卫 │ ├─static 资源文件 │ ├─store 状态管理 Pinia │ │ ├─modules 模块化 │ │ │ ├─template 语法模板 │ │ │ ├─app.js 系统 - 系统信息 │ │ │ └─user.js 用户 - token │ │ └─index.js 入口 │ ├─styles 样式目录 │ │ ├─base.scss 基本 │ │ ├─variables.scss 变量 │ │ └─index.scss 入口 │ ├─uni_modules uni-app的包管理 │ ├─utils 工具 │ │ ├─request 网络请求拦截器 │ │ └─share.js 分享 - 小程序使用 │ ├─config.js 系统配置 - h5动画配置、‌i18n国际化 │ ├─App.vue 根组件 │ ├─manifest.json 应用配置 - 名称、‌appid、‌logo、‌版本等打包信息 │ ├─pages.json 页面配置 - 路由、‌导航条、‌选项卡等页面类信息 │ ├─uni.scss 内置的常用样式变量 │ └─main.js 核心入口文件 ├─.env.development 开发环境 ├─.env.production 生产环境 ├─.gitignore git禁止上传配置文件 ├─.npmrc 配置npm行为 ├─.yarnrc 配置yarn行为 ├─index.html 主要模板文件 ├─package.json 模块包的描述 ├─uno.config.js unocss原子化 CSS 配置文件 ├─vite.config.js vite主要配置文件 └─README.md 说明文档 ```