@zippybee/uni-create-page
v1.0.16
Published
🚀 一个专业的 UniApp 页面创建脚手架工具，提供智能化的页面生成和项目模板管理功能。
Readme
@zippybee/uni-create-page
🚀 一个专业的 UniApp 页面创建脚手架工具，提供智能化的页面生成和项目模板管理功能。
✨ 核心特性
- 🎯 智能页面创建 - 交互式创建页面，自动生成文件并更新
pages.json配置 - 📦 分包页面支持 - 完善的主包和分包页面创建，支持现有分包结构
- 🎨 灵活模板系统 - 支持普通页面和自定义导航栏页面模板
- ⚡ Skyline 渲染引擎 - 支持微信小程序新一代 Skyline 渲染引擎配置
- 🛠️ 项目脚手架 - 快速创建完整的 UniApp Vue3 TypeScript 项目
- 💫 CLI 交互体验 - 美观的命令行界面和友好的操作提示
- 📱 多端兼容 - 支持小程序自定义导航栏配置（含支付宝小程序适配）
📦 安装
全局安装
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） - 页面标题 - 设置导航栏标题
- Skyline 渲染 - 是否启用微信小程序 Skyline 渲染引擎
- 自定义导航栏 - 是否使用自定义导航栏样式
- 分包页面 - 是否创建到分包中（如果项目已配置分包）
创建新项目
快速创建一个完整的 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.json 自动配置
主包页面配置
{
"pages": [
{
"path": "pages/{router}/{router}",
"style": {
"navigationBarTitleText": "页面标题",
"navigationBarTextStyle": "black"
}
}
]
}分包页面配置
自动添加到对应分包的 pages 数组中：
{
"subPackages": [
{
"root": "subpackage",
"pages": [
{
"path": "{router}/{router}",
"style": {
"navigationBarTitleText": "页面标题",
"navigationBarTextStyle": "black"
}
}
]
}
]
}高级配置选项
Skyline 渲染引擎
{
"style": {
"renderer": "skyline",
"navigationBarTitleText": "页面标题"
}
}自定义导航栏（含小程序适配）
{
"style": {
"navigationStyle": "custom",
// #ifdef MP-ALIPAY
"transparentTitle": "always",
"titlePenetrate": "YES",
"defaultTitle": ""
// #endif
}
}🌟 项目模板特性
通过 create 命令创建的项目基于 uniapp-vue3-template，包含：
- ✅ 现代技术栈: UniApp + Vue3 + TypeScript
- ✅ 开箱即用: 预配置的构建工具和开发环境
- ✅ 多端支持: H5、小程序、App 一套代码多端运行
- ✅ 规范化: ESLint + Prettier 代码规范
- ✅ 组件库: 常用 UI 组件和工具函数
创建后自动执行：
- 删除
.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技术架构
- 构建工具: Rollup + TypeScript
- 命令行: Commander.js
- 交互界面: Inquirer.js + Figlet + Chalk
- 版本控制: Simple-git
- 文件处理: Node.js 原生 fs 模块 + comment-json
🛠️ 核心功能实现
PageTool 类
- 单例模式管理页面配置
- 自动读取和更新
pages.json - 支持 JSON 注释格式
- 智能分包页面处理
模板系统
- 条件编译指令处理（
#ifdef、#endif） - 变量替换（
${title}） - 多文件模板支持
- 自定义导航栏模板
配置管理
- 自动检测现有分包结构
- 智能配置合并
- 多平台兼容性处理
❓ 常见问题
Q: 提示"模板目录不存在"怎么办？
A: 确保项目根目录下存在 template 文件夹，并包含 page.vue 模板文件。你可以：
mkdir template
# 创建基础模板文件
touch template/page.vueQ: pages.json 文件找不到？
A: 工具会在 src/pages.json 路径查找配置文件，请确保：
- 文件路径正确：
{项目根目录}/src/pages.json - 文件格式正确：有效的 JSON 格式
- 文件权限正确：可读写权限
Q: 分包页面创建失败？
A: 请检查：
pages.json中是否已配置subPackages数组- 分包根目录是否存在
- 分包名称是否正确
Q: 自定义导航栏不生效？
A: 确保：
- 模板文件中包含
#ifdef custom-nav条件编译 - 选择了"自定义导航栏"选项
- 查看生成的
pages.json配置是否正确
Q: Skyline 渲染引擎配置问题？
A: Skyline 渲染引擎：
- 仅支持微信小程序
- 需要基础库 2.30.4 或以上版本
- 可能与某些组件库不兼容
Q: 如何自定义页面模板？
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>Q: 项目创建网络超时？
A: 模板克隆可能受网络影响，可以：
- 使用稳定的网络环境
- 考虑配置 Git 代理
- 手动克隆模板仓库
🤝 贡献指南
欢迎参与项目贡献！
提交 Issue
- 🐛 Bug 报告: 详细描述问题复现步骤
- 💡 功能建议: 说明需求场景和预期效果
- 📖 文档改进: 指出文档不清晰的地方
提交 Pull Request
- Fork 本仓库
- 创建功能分支：
git checkout -b feature/amazing-feature - 提交更改：
git commit -m 'Add amazing feature' - 推送分支：
git push origin feature/amazing-feature - 创建 Pull Request
📊 更新日志
v1.0.2 (Latest)
- ✨ 支持分包页面创建
- 🔧 优化模板处理逻辑
- 🐛 修复配置文件读取问题
v1.0.1
- 🎨 改进命令行界面
- � 添加小程序自定义导航栏支持
v1.0.0
- 🎉 首次发布
- 🎯 基础页面创建功能
- 🛠️ 项目模板创建
🀽� 许可证
本项目基于 ISC License 开源。
🔗 相关链接
如果这个工具对你有帮助，请给个 ⭐️ Star 支持一下！
Made with ❤️ by ZippyBee Team