cool-one

cool-one

uni-app 多端项目脚手架：uni-app（unibest）+ Vue 3 + TypeScript + wot-ui-v2 + UnoCSS + Pinia，内置一套通用组件与 本地 mock 数据，不依赖后端即可跑通列表 / 详情 / 登录等完整链路。

快速创建

# 方式一：npx（免安装，推荐）
npx cool-one my-app

# 方式二：pnpm
pnpm dlx cool-one my-app

# 方式三：全局安装
npm i -g cool-one
cool-one my-app

包名不带 create- 前缀，所以 npm create cool-one 不可用（npm 会去找 create-cool-one），请用上面的 npx / pnpm dlx。

不传目录名时会交互式询问。创建完成后：

cd my-app
pnpm install
pnpm dev:h5          # 浏览器预览（默认走本地 mock）
pnpm dev:mp-weixin   # 微信小程序（用微信开发者工具打开 dist/dev/mp-weixin）

模板包含什么

分类	内容
框架	unibest 脚手架 + Vite 5 + TypeScript + Pinia（持久化）+ UnoCSS + SCSS，H5 / 微信小程序 / App 多端
布局体系	6 套 layout（default / main / page / scrollPage / subMainPage / subPage），页面用 definePage({ layout }) 一行切换
通用组件	main-navbar main-tabbar main-page-container main-scroll-view main-scroll-list main-search-filter main-title main-text main-divider main-content-box main-button-radio main-confirm-dialog info-card record-timeline todo-card UploadImage
基础设施	统一请求层（含双 token 无感刷新、401 重放、错误归一）、登录态与路由拦截、tabbar 状态与角色过滤、useListPage / useRequest 等 hooks、时间与安全区工具
样式规范	750 设计稿 → 一律 rpx；主题色与 wot-ui 变量覆盖集中在 src/style/index.scss；卡片 / 按钮 / 标签等全局类
本地 mock	src/mock 拦截请求返回假数据，含登录、分页列表、详情、提交、统计，确定性数据便于调试
AI 协作	.agents/skills/ 内置 5 个技能（新增页面 / 接口请求 / mock 数据 / 多端条件编译 / wot-ui 用法）与 CODEBUDDY.md 项目规范

目录结构

├── bin/create.js          # 脚手架入口
├── template/              # 模板工程（创建时被拷贝到你的项目目录）
│   ├── .agents/skills/    # AI 协作技能
│   ├── env/               # 环境变量（默认 VITE_USE_MOCK=true）
│   ├── scripts/           # pages.json / manifest.json 基础文件生成脚本
│   ├── src/
│   │   ├── api/           # 接口定义
│   │   ├── components/    # 通用组件（main-* 走 easycom）
│   │   ├── http/          # 请求层
│   │   ├── hooks/         # 组合式函数（自动导入）
│   │   ├── layouts/       # 布局外壳
│   │   ├── mock/          # mock 引擎与数据
│   │   ├── pages/         # 页面（工作台 / 列表示例 / 我的 / 登录）
│   │   ├── router/        # 登录策略与路由拦截
│   │   ├── store/         # Pinia（token / user / statistics）
│   │   ├── style/         # 全局样式与主题变量
│   │   ├── tabbar/        # tabbar 数据源与状态
│   │   └── utils/         # 工具函数
│   └── CODEBUDDY.md       # 项目开发规范（AI 与人共同遵循）
└── README.md

手动使用（不走脚手架）

直接把 template/ 目录整体复制到你的项目位置，然后 pnpm install && pnpm dev:h5 即可。

对接真实后端

编辑项目内的 env/.env：

VITE_USE_MOCK = false
VITE_SERVER_BASEURL = 'https://your-gateway.example.com'
VITE_WX_APPID = '你的小程序 AppID'

接口路径与错误处理逻辑无需改动（见 src/http/http.ts 与 .agents/skills/api-request）。

License

MIT