UNIAPP 模板生成器

基于 Vue3 + TypeScript + Pinia 的 Uni.app 项目脚手架工具

📋 项目概述

@zayn919/create-zh-uni 是一个用于快速创建 Uni.app 项目的脚手架工具，集成了 Vue3、TypeScript、UnoCSS、Pinia 状态管理等现代化技术栈，帮助开发者快速搭建高质量的多端应用项目。

🎯 项目特色

🚀 快速启动

• 一键创建完整的项目结构
• 预配置开发环境和构建工具
• 支持多种 UI 组件库选择

📱 多端支持

支持编译到多个平台：

• H5 端: 现代化的 Web 应用
• 小程序: 微信、支付宝、百度、QQ、抖音等
• App: 原生应用体验
• 快应用: 轻量级应用
• 鸿蒙: 华为 HarmonyOS 应用

🛠️ 技术栈集成

• Vue3: 最新的 Vue.js 框架，组合式 API
• TypeScript: 完整的类型支持，提升开发体验
• Pinia: 现代化的状态管理，支持持久化
• UnoCSS: 原子化 CSS，提高开发效率
• Vite: 快速的构建工具，极速热更新

📦 安装与使用

创建项目

# 交互式创建
npx @zayn919/create-zh-uni

# 使用默认模板创建
npx @zayn919/create-zh-uni my-app

# 指定模板类型
npx @zayn919/create-zh-uni my-app --template base-wotui

可选模板

模板类型	组件库	特点
base-wotui	Wot Design Uni	企业级 UI 组件库
base-uniui	uni-ui	官方组件库
base-uViewPro	uViewPro	成熟的移动端组件库

项目启动

cd your-project-name
pnpm i                    # 安装依赖
pnpm dev:h5               # 启动 H5 开发服务器
pnpm dev:mp-weixin        # 微信小程序开发

🏗️ 项目结构

your-project/
├── src/
│   ├── api/          # API 接口封装
│   ├── components/   # 公共组件
│   ├── pages/        # 页面文件
│   ├── static/       # 静态资源
│   ├── store/        # Pinia 状态管理
│   ├── utils/        # 工具函数
│   ├── App.vue       # 应用入口组件
│   └── main.ts       # 应用入口文件
├── pages.json        # 页面配置
├── manifest.json     # 应用配置
├── uni.scss          # 全局样式
├── package.json      # 项目依赖
├── tsconfig.json     # TypeScript 配置
├── vite.config.ts    # Vite 配置
└── uno.config.ts     # UnoCSS 配置

💡 核心功能

1. Pinia 状态管理

集成 Pinia 和持久化插件，支持状态自动持久化：

// store/token.ts
import { defineStore } from 'pinia'

export const useTokenStore = defineStore(
  'token',
  () => {
    const token = ref<string>('');
    
    const setToken = (val: string) => {
      token.value = val;
    };
    
    const logout = async () => {
      try {
        // 退出登录逻辑
        await _logout();
      } catch (error) {
        console.error('退出登录失败:', error);
      } finally {
        token.value = '';
        uni.removeStorageSync('token');
        const userStore = useUserStore();
        userStore.clearUserInfo();
      }
    };

    return {
      token,
      setToken,
      logout
    };
  },
  {
    persist: true,
  }
);

2. TypeScript 支持

完整的 TypeScript 类型支持：

• Vue3 组件类型定义
• Uniapp API 类型补全
• 路径别名 @/* 指向 src/*
• 严格的类型检查配置

3. UnoCSS 原子化 CSS

提供原子化 CSS 开发体验：

<template>
  <view class="flex items-center justify-center p-4">
    <text class="text-lg text-blue-500">Hello Uniapp</text>
  </view>
</template>

🚀 开发命令

开发环境

# H5 端开发
pnpm dev:h5

# 各平台小程序开发
pnpm dev:mp-weixin      # 微信小程序
pnpm dev:mp-alipay      # 支付宝小程序
pnpm dev:mp-baidu      # 百度小程序
pnpm dev:mp-qq         # QQ小程序
pnpm dev:mp-toutiao    # 抖音小程序
pnpm dev:mp-kuaishou   # 快手小程序
pnpm dev:mp-lark       # 飞书小程序
pnpm dev:mp-jd         # 京东小程序
pnpm dev:mp-xhs        # 小红书小程序
pnpm dev:mp-harmony    # 鸿蒙应用

生产构建

# H5 端构建
pnpm build:h5

# 各平台小程序构建
pnpm build:mp-weixin   # 微信小程序
# ... 其他平台类似

类型检查

pnpm type-check        # TypeScript 类型检查

🎨 UI 组件库集成

Wot Design Uni

• 企业级 UI 组件库
• 完整的组件覆盖
• 优秀的设计规范
• 丰富的定制选项

uni-ui

• DCloud 官方组件库
• 与 Uniapp 深度集成
• 轻量级设计
• 稳定可靠

uViewPro

• 成熟的移动端组件库
• 丰富的组件生态
• 优秀的移动端体验
• 活跃的社区支持

🔧 开发建议

1. 使用组合式 API: 推荐 Vue3 的 <script setup> 语法
2. TypeScript 优先: 充分利用类型检查提升代码质量
3. 模块化开发: 合理拆分组件和业务逻辑
4. 状态管理: 复杂状态使用 Pinia 统一管理
5. 样式规范: 使用 UnoCSS 原子化类名，保持代码简洁

📈 项目优势

• ✅ 零配置启动: 开箱即用的完整开发环境
• ✅ 现代化技术栈: Vue3 + TypeScript + Vite 最佳实践
• ✅ 多端统一: 一套代码，多端运行
• ✅ 类型安全: 完整的 TypeScript 支持
• ✅ 开发体验: 极速热更新，丰富的工具链
• ✅ 可扩展性: 模块化设计，易于扩展和维护

🆚 与其他方案对比

特性	zh-uni	官方脚手架	其他社区方案
Vue3 支持	✅	✅	❌
TypeScript	✅ 内置	❌ 需配置	⚠️ 部分
状态管理	✅ Pinia	❌ 无	⚠️ Vuex
原子化 CSS	✅ UnoCSS	❌ 无	⚠️ 部分
多组件库	✅	❌ 单一	⚠️ 有限
持久化存储	✅ 内置	❌ 需自配	⚠️ 需配置

📝 更新日志

v1.0.0 (2024-01)

• 🎉 初始版本发布
• ✨ 支持 Vue3 + TypeScript
• 🎨 集成 UnoCSS
• 💾 集成 Pinia 状态管理
• 📱 支持多端编译

未来规划

• 🔄 持续跟进 Uniapp 内核更新
• 🎨 集成更多 UI 组件库
• 🔧 添加更多开发工具
• 📚 完善文档和示例

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来完善这个项目！

📄 许可证

MIT License

---

🚀 立即使用 zh-uni 开发你的下一个项目！

如果你觉得这个项目有用，请给它一个 ⭐️