@zippybee/uni-create-page
Advanced tools
🚀 一个专业的 UniApp 页面创建脚手架工具，提供智能化的页面生成和项目模板管理功能。
pages.json 配置npm install -g @zippybee/uni-create-page
# 或
pnpm add -g @zippybee/uni-create-page
npm install @zippybee/uni-create-page --save-dev
# 或
pnpm add @zippybee/uni-create-page -D
在 UniApp 项目根目录执行：
uni-create-page
系统将依次询问：
home、user/profile）快速创建一个完整的 UniApp Vue3 项目：
uni-create-page create -n my-app
创建完成后：
cd my-app
pnpm install
pnpm run dev:h5
your-uniapp-project/
├── src/
│ ├── pages.json # UniApp 页面路由配置（必需）
│ ├── pages/ # 主包页面目录
│ └── subpackage/ # 分包目录（可选）
└── template/ # 页面模板目录（必需）
├── page.vue # 标准页面模板
└── ... # 其他资源文件
template/page.vue)<template>
<!-- #ifdef default -->
<view class="page">
<!-- 标准页面内容 -->
<text>${title}</text>
</view>
<!-- #endif -->
<!-- #ifdef custom-nav -->
<view class="custom-page">
<!-- 自定义导航栏内容 -->
<view class="custom-nav">${title}</view>
<view class="content">页面内容</view>
</view>
<!-- #endif -->
</template>
工具会根据配置自动处理条件编译指令和变量替换。
创建主包页面时，生成的文件结构：
src/
└── pages/
└── {router}/
├── {router}.vue # 页面组件
├── index.js # 页面逻辑（从模板复制）
├── style.css # 页面样式（从模板复制）
└── ... # 其他模板文件
创建分包页面时，生成结构：
src/
└── {subPackageName}/
└── {router}/
├── {router}.vue # 页面组件
├── index.js # 页面逻辑
├── style.css # 页面样式
└── ... # 其他模板文件
{
"pages": [
{
"path": "pages/{router}/{router}",
"style": {
"navigationBarTitleText": "页面标题",
"navigationBarTextStyle": "black"
}
}
]
}
自动添加到对应分包的 pages 数组中：
{
"subPackages": [
{
"root": "subpackage",
"pages": [
{
"path": "{router}/{router}",
"style": {
"navigationBarTitleText": "页面标题",
"navigationBarTextStyle": "black"
}
}
]
}
]
}
{
"style": {
"renderer": "skyline",
"navigationBarTitleText": "页面标题"
}
}
{
"style": {
"navigationStyle": "custom",
// #ifdef MP-ALIPAY
"transparentTitle": "always",
"titlePenetrate": "YES",
"defaultTitle": ""
// #endif
}
}
通过 create 命令创建的项目基于 uniapp-vue3-template，包含：
创建后自动执行：
.git 目录package.json 中的项目名称# 查看版本
uni-create-page --version
uni-create-page -V
# 查看帮助
uni-create-page --help
# 交互式创建页面（默认行为）
uni-create-page
# 创建新项目
uni-create-page create -n <project-name>
uni-create-page create --name <project-name>
# 克隆仓库
git clone <repository-url>
cd zippybee-uni-create-page
# 安装依赖
pnpm install
# 开发模式（监听文件变化）
pnpm run dev
# 生产构建
pnpm run build
pages.json#ifdef、#endif）${title}）A: 确保项目根目录下存在 template 文件夹，并包含 page.vue 模板文件。你可以：
mkdir template
# 创建基础模板文件
touch template/page.vue
A: 工具会在 src/pages.json 路径查找配置文件，请确保：
{项目根目录}/src/pages.jsonA: 请检查：
pages.json 中是否已配置 subPackages 数组A: 确保：
#ifdef custom-nav 条件编译pages.json 配置是否正确A: Skyline 渲染引擎：
A: 在 template/page.vue 中：
<template>
<!-- #ifdef default -->
<view class="normal-page">
<text>${title}</text>
<!-- 普通页面内容 -->
</view>
<!-- #endif -->
<!-- #ifdef custom-nav -->
<view class="custom-nav-page">
<view class="nav-bar">${title}</view>
<!-- 自定义导航栏内容 -->
</view>
<!-- #endif -->
</template>
A: 模板克隆可能受网络影响，可以：
欢迎参与项目贡献！
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-feature本项目基于 ISC License 开源。
如果这个工具对你有帮助，请给个 ⭐️ Star 支持一下！
Made with ❤️ by ZippyBee Team
FAQs
🚀 一个专业的 UniApp 页面创建脚手架工具，提供智能化的页面生成和项目模板管理功能。
We found that @zippybee/uni-create-page demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.