Repository files navigation

🚀以实用为先的 uni-app 起手模板。查看演示

该模板为您的 uniapp 项目提供了一个强大的起点，集成了现代化工具和精心设计的约定，以简化开发流程。

• 💪 优化的资源管理: 无缝切换本地与远程静态资源。这对于克服小程序包大小限制至关重要。
• 📦 智能分包: 清晰直观的 pages 目录结构，结合便捷的配置，轻松实现基于功能的分包。
• 🛣 类 VueRouter 路由: 使用uniapp-router-next 并进行了增强，如拦截器、中间件和路由别名，提供熟悉的 API 体验。
• 📊 Pinia 状态管理: 借助Pinia 实现强大且直观的应用状态管理。
• ⚡️ 现代化请求工作流: 采用Alova，一个下一代请求库，简化数据获取流程。
• 👇 内置 Z-Paging: 集成了高性能、易用的下拉分页组件，轻松实现下拉刷新和上拉加载更多等功能。
• 💅 Unocss 原子化 CSS: 使用原子化 CSS 类名书写规范，即使在小程序环境下也完美支持。
• 🎨 轻量级 UI 与主题化: 集成wot-design-uni，提供更轻量的 UI，满足绝大多数业务场景，并支持主题定制。
• 📝 专注 #"auto">

  快速上手

1. 克隆项目

git clone https://github.com/viarotel-org/vite-uniapp-template.gitcd vite-uniapp-template

2. 安装依赖

pnpm install

3. 运行项目

使用代码编辑器 (例如 VS Code)

# H5 平台pnpm dev:h5# 微信小程序pnpm dev:mp-weixin# Android Apppnpm dev:app-android# 更多平台请参阅 package.json 中的 `scripts` 部分。

使用 HBuilderX

功能示例

创新的分包结构

src/├── pages/           # 主包页面│   └── index.vue├── pages-user/      # 用户相关分包│   ├── profile.vue│   └── settings.vue└── pages-shop/      # 商城相关分包    ├── list.vue    └── detail.vue

src/└── pages/    ├── index/           # 主包页面（必需）    │   ├── index.vue    # 首页（必需）    │   ├── category.vue # Tab页面    │   └── mine.vue     # Tab页面    ├── user/            # 用户分包    │   ├── login.vue    │   └── profile.vue    └── shop/            # 商城分包        ├── list.vue        └── detail.vue

// pages.config.jsexportdefault{// 主包配置pages:[{path:'pages/index/index',style:{navigationBarTitleText:'首页'}},{path:'pages/index/category',style:{navigationBarTitleText:'分类'}}],// 分包配置subPackages:[{root:'pages/user',pages:[{path:'login',style:{navigationBarTitleText:'登录'}}]}]}

静态资源处理

# 本地开发模式 (.env.development)VITE_ASSETS_MODE=local# 生产环境 (.env.production)VITE_ASSETS_MODE=remoteVITE_ASSETS_CDN=https://your-cdn.com/assets

<imagesrc="~@assets/images/logo.png"/><!-- 开发环境: /src/assets/images/logo.png --><!-- 生产环境: https://your-cdn.com/assets/images/logo.png -->

全局主题定制

<divclass="text-primary-500"></div><divclass="bg-primary-500"></div><!-- 仅在小程序中生效，具体使用方法请参考 [unocss-preset-uni](https://github.com/uni-helper/unocss-preset-uni)  --><divclass="uni-mp:border uni-mp:border-primary-500"></div>

页面导航

在模板中：

// 跳转到登录页并携带查询参数this.$Router.push({path:'/login',query:{id:'someId',},})// 获取路由参数constuserId=this.$Route.query.id// 替换当前页面this.$Router.replace('/dashboard')// 关闭所有页面并跳转this.$Router.replaceAll('/home')

在脚本中 (支持自动导入)：

// 已预置自动导入该部分可省略// import { useRoute, useRouter } from '$uni-router'constrouter=useRouter()constroute=useRoute()router.push('/settings')console.log(route.query)

路由别名 (pages.config.js)：

constaliasConfig={path:'pages/login/index',// 实际路径aliasPath:'/login',// 别名}

路由守卫

// 示例: src/permission/login/index.jsrouter.beforeEach((to,from,next)=>{// 在此编写你的逻辑 (例如：检查用户是否已认证)// if (to.path === '/profile' && !isAuthenticated) {//   next('/login');// } else {//   next();// }next()// 默认继续导航})router.afterEach((to,from)=>{// 导航后逻辑})

路由中间件

使用中间件 (pages.config.js)：

// 对用户页面应用 'test' 中间件constpageConfig={path:'/pages/user/index',aliasPath:'/user',meta:{middleware:['test'],},}

定义中间件：

// 示例: src/permission/test/index.jsimport{defineMiddleware}from'$uni-router'importtestMiddlewareLogicfrom'./test/index.js'exportdefault(app,router)=>{defineMiddleware('test',testMiddlewareLogic,{ router, app})}

常见问题

获取支持

支持本项目