vite-uniapp-template 3.0 正式发布：以实用为先的 uni-app 项目模板🎉 vite-uni

🎉 概述

vite-uniapp-template V3.0 版本现已正式发布！本次更新对项目结构进行了全面优化，新增了多个实用功能，并提供了更好的开发体验。这是一个专注于实用性的 uni-app 项目模板，旨在帮助开发者快速构建高质量的跨平台应用。

🚀 V3.0 版本更新亮点

UI 界面全面优化
- 重新设计的演示页面，展示更直观
- 全新改版的登录页面，提升用户体验
- 新增通用列表页面演示，便于快速开发
架构升级
- 优化分包目录结构，提升应用性能
- 重构项目整体架构，提高可维护性
- 完善路由系统，支持更灵活的页面导航
小程序适配增强
- 修复小程序环境下 UnoCSS 的兼容性问题
- 全面优化小程序端的性能表现
- 改进生产环境的构建配置

💡 核心特性详解

1. 创新的分包结构

传统分包 vs 新型分包

传统分包结构：

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

vite-uniapp-template 的创新分包结构：

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

分包配置示例：

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

2. 路由权限管理

// src/permission/login/index.js
export default function login(router) {
  const homePath = '/pages/index/index'
  const loginPath = '/pages/login/index'
  
  // 白名单路由配置
  const whiteList = [
    loginPath, 
    '/pages/common/rich-view/index', 
    '/pages/common/web-view/index'
  ]

  router.beforeEach((to, from, next) => {
    const userStore = useUserStore()
    const token = userStore.token

    if (token) {
      if (to.path === loginPath) {
        next(homePath)
      }
      else if (userStore.userId) {
        next()
      }
      else {
        userStore.getUserData()
          .then(() => next())
          .catch(() => {
            userStore.logout()
            next({ path: loginPath })
          })
      }
    }
    else if (whiteList.includes(to.path)) {
      next()
    }
    else {
      next({ path: loginPath })
    }
  })
}

3. 智能路由导航

// 组件中使用
this.$Router.push({
  path: '/pages/user/profile',
  query: { id: 123 }
})

// 组合式 API 方式
const router = useRouter()
const route = useRoute()

// 页面导航
router.push('/pages/settings')

// 获取参数
console.log(route.query.id)

// 替换当前页面
router.replace('/pages/dashboard')

// 关闭所有页面并跳转
router.replaceAll('/pages/home')

4. 静态资源智能管理

# 本地开发模式 (.env.dev)
VITE_ASSETS_MODE=local

# 生产环境 (.env.prod)
VITE_ASSETS_MODE=remote
VITE_ASSETS_CDN=https://your-cdn.com/assets

使用示例：

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

📦 快速开始

# 克隆项目
git clone https://github.com/viarotel-org/vite-uniapp-template.git

# 安装依赖（推荐使用 pnpm）
pnpm install

# 启动项目
pnpm dev:h5        # H5 平台
pnpm dev:mp-weixin # 微信小程序
pnpm dev:app       # App 平台

💡 最佳实践建议

分包处理
- 遵循 pages/index 作为主包的约定
- 合理规划主包与分包的内容分布
- 使用预加载机制优化性能
- 根据业务逻辑合理划分分包边界
路由管理
- 使用实际路径而非别名进行程序化跳转
- 保持路由守卫逻辑简洁清晰
- 善用中间件分离业务逻辑
资源管理
- 开发环境使用本地资源模式
- 生产环境合理配置 CDN 地址
- 注意控制主包大小，合理使用分包
状态管理
- 使用 Pinia 进行状态管理，按模块拆分
- 配合组合式 API，提高代码可维护性
样式处理
- 充分利用 UnoCSS 的原子化 CSS 能力
- 注意处理小程序端的样式兼容性
- 使用主题变量统一管理配色方案

🎯 适用场景

需要快速启动的企业级 uni-app 项目
重视开发体验和工程化的团队
需要跨平台（H5、小程序、App）统一解决方案的应用
注重性能优化和代码质量的项目

🔗 相关链接

项目地址：GitHub
在线演示：Demo
问题反馈：Issues

🤝 支持与贡献

这是一个由社区驱动的开源项目，我们欢迎任何形式的贡献，包括但不限于：

提交问题和建议
完善文档内容
提交代码改进
分享使用经验

如果您觉得这个项目对您有帮助，欢迎给项目点个 Star ⭐️

📬 联系方式

Email: viarotel@qq.com
GitHub Issues: 提交问题

vite-uniapp-template 3.0 的发布标志着项目迈向了一个新的台阶。创新的分包结构设计和全面的功能优化，将为开发者提供更好的开发体验。感谢社区的支持与反馈，这是我们持续进步的动力！