UXTO Frontend

UXTO UniApp 前端脚手架模板 - 支持 iOS、Android、鸿蒙多平台。

安装

使用 CLI 创建项目（推荐）

# 安装 CLI
npm install -g @atooyu/uxto-cli

# 创建新项目
uxto create my-app

# 进入项目
cd my-app

# 安装依赖
pnpm install

# 运行
pnpm dev:h5       # H5
pnpm dev:app      # App (iOS/Android)
pnpm dev:harmony  # 鸿蒙

直接使用模板

# 克隆模板
npx degit atooyu/uxto-fronted/template my-app

# 或使用模板创建
npm create @atooyu/uxto-app my-app

项目结构

uxto-fronted/
├── template/          # 脚手架模板
│   ├── src/
│   │   ├── pages/     # 页面
│   │   ├── stores/    # Pinia 状态管理
│   │   ├── utils/     # 工具函数
│   │   └── assets/    # 静态资源
│   ├── package.json
│   └── vite.config.js
├── example/           # 示例项目
│   ├── src/
│   │   ├── pages/
│   │   │   ├── home/    # 首页
│   │   │   ├── uxto/    # UXTO 页面
│   │   │   └── mine/    # 我的（含主题切换）
│   │   └── stores/      # 主题状态
│   └── package.json
└── README.md

模板特性

• ✅ UniApp + Vue3 + TypeScript - 最新技术栈
• ✅ 多平台支持 - iOS、Android、鸿蒙、H5、小程序
• ✅ Pinia 状态管理 - 轻量级状态管理方案
• ✅ UXTO 组件库 - 内置 @atooyu/uxto-ui
• ✅ u-tabbar - 精美的底部导航组件
• ✅ 主题切换 - 支持暗黑模式和灰色模式
• ✅ CSS 变量 - 灵活的主题定制

示例项目

示例项目展示了：

• u-tabbar 底部导航使用
• 暗黑模式 / 灰色模式切换
• 组件库使用方法

cd example
pnpm install
pnpm dev:h5

主题切换

模板内置了两种主题模式：

暗黑模式

import { useThemeStore } from '@/stores/theme'

const theme = useThemeStore()
theme.setDarkMode(true)

灰色模式

theme.setGrayMode(true)

平台支持

| 平台 | 支持状态 | |------|---------| | iOS | ✅ | | Android | ✅ | | 鸿蒙 | ✅ | | H5 | ✅ | | 微信小程序 | ✅ | | 支付宝小程序 | ✅ | | 百度小程序 | ✅ | | 字节小程序 | ✅ |

相关项目

| 项目 | 说明 | |------|------| | @atooyu/uxto-ui | UXTO 组件库 | | @atooyu/uxto-cli | UXTO 脚手架工具 |

开发指南

运行模板

cd template
pnpm install
pnpm dev:h5

运行示例

cd example
pnpm install
pnpm dev:h5

License

MIT © atooyu