@winner-fed/create-project
v2.4.13
Published
An easy way to start a project
Readme
@winner-fed/create-project
🚀 一个强大的前端项目脚手架工具，支持多种框架、构建工具和应用类型的快速项目创建。
✨ 特性
- 🎯 多框架支持: Vue 2/3、小程序（Taro、uni-app、Hola）
- 📱 多应用类型: 移动端、PC端、H5离线包
- ⚡ 多构建工具: Webpack（bundle）、Vite（bundless）
- 🎨 丰富UI框架: WinUI、Vant、Element UI、Ant Design Vue、HUI
- 📝 TypeScript支持: 完整的 TypeScript 开发环境
- 📐 布局适配: rem、viewport 适配方案
- 🧪 单元测试: Jest、Vitest 测试框架支持
- 🌐 微前端: 支持 qiankun、hui pro 1.0 微前端方案
- 📦 版本控制: Git、SVN 版本控制工具支持
- 🔧 企业级配置: 镜像源、See 包、离线包等企业级功能
🛠 安装使用
快速开始
使用 npm：
npm init @winner-fed/project@2 my-project使用 yarn：
yarn create @winner-fed/project my-project使用 pnpm：
pnpm create @winner-fed/project my-project命令行参数
支持通过命令行参数快速创建项目：
# 基础用法
npm init @winner-fed/project@2 my-project
# 使用命令行参数
npm init @winner-fed/project@2 my-project --framework=v3 --application=mobile --typescript --install可用参数
| 参数 | 别名 | 描述 | 可选值 |
|------|------|------|--------|
| --framework | - | 选择框架 | v2, v3, mini |
| --application | - | 应用类型 | mobile, pc, offline |
| --mini | - | 小程序框架 | taro, uniapp, hola |
| --mobileDevPlatform | - | 移动开发平台 | gmu, mpaas |
| --buildTools | - | 构建工具 | bundle, bundless |
| --uiFramework | - | UI框架 | wui, vant, hui, element-ui, ant |
| --layoutAdapter | - | 布局适配 | rem, vw |
| --versionControl | - | 版本控制 | git, svn |
| --typescript | --ts | 启用TypeScript | - |
| --mirror-source | --ms | 启用镜像源 | - |
| --see | - | 启用See包支持 | - |
| --vitest | - | 启用Vitest测试 | - |
| --jest | - | 启用Jest测试 | - |
| --force | - | 强制覆盖目录 | - |
| --no-git | - | 不初始化Git | - |
| --install | - | 自动安装依赖 | - |
交互式创建
运行命令后，脚手架将引导您完成以下配置：
- 项目名称 - 输入项目名称
- 框架选择 - Vue 2、Vue 3 或小程序
- 应用类型 - 移动端、PC端或离线包
- TypeScript - 是否启用 TypeScript 支持
- 构建工具 - Webpack 或 Vite
- UI框架 - 选择合适的UI组件库
- 布局适配 - rem 或 viewport 适配方案
- 版本控制 - Git 或 SVN
- 企业功能 - 镜像源、See包等
- 微前端 - 是否支持微前端架构
- 单元测试 - Jest 或 Vitest 测试框架
📋 支持的模板
框架支持
| 框架 | 版本 | 描述 | |------|------|------| | Vue 2 | 2.7.x | 支持 Composition API | | Vue 3 | 3.x | 最新的 Vue 3 特性 | | Taro | 3.x | 多端统一开发框架 | | uni-app | 3.x | 跨平台应用开发框架 | | Hola | - | 企业级小程序开发框架 |
应用类型
移动端应用
- 📱 移动端 H5 应用
- 📦 H5 离线包（GMU/mPaaS）
- 🔧 自动适配不同屏幕尺寸
PC端应用
- 💻 桌面端 Web 应用
- 🎨 企业级管理系统
- 📊 数据可视化应用
小程序
- 📲 微信小程序
- 🚀 支付宝小程序
- 📱 其他各平台小程序
UI框架支持
| UI框架 | 适用场景 | Vue 2 | Vue 3 | |--------|----------|-------|-------| | WinUI | 企业级移动端 | ✅ | ✅ | | Vant | 移动端电商 | ✅ | ✅ | | Element UI | PC端管理后台 | ✅ | ✅ | | Ant Design Vue | PC端企业应用 | ✅ | ✅ | | HUI | 企业级PC端 | ✅ | ❌ |
构建工具
Webpack (bundle)
- 🔧 基于 Vue CLI 5.x
- 📦 代码分割和懒加载
- 🔌 丰富的插件生态
- 🛡️ 生产环境优化
Vite (bundless)
- ⚡ 极速的冷启动
- 🔥 热模块替换 (HMR)
- 📦 现代化构建工具
- 🚀 更好的开发体验
🔧 项目结构
生成的项目具有以下结构：
my-project/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 资源文件
│ │ ├── fonts/ # 字体文件
│ │ ├── img/ # 图片资源
│ │ └── style/ # 样式文件
│ ├── components/ # 组件
│ │ └── global/ # 全局组件
│ ├── router/ # 路由配置
│ ├── services/ # API服务
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── package.json # 依赖配置
├── vue.config.js # Vue配置(webpack)
├── vite.config.js # Vite配置(vite)
└── README.md # 项目说明⚙️ 配置说明
TypeScript 配置
启用 TypeScript 后，项目将包含：
tsconfig.json- TypeScript 配置- 类型定义文件 (
*.d.ts) - 完整的类型支持
微前端配置
支持以下微前端方案：
qiankun
- 🏠 主应用框架
- 🧩 子应用加载
- 📡 应用间通信
hui pro 1.0
- 🏢 企业级微前端解决方案
- 🔧 定制化配置
- 📱 移动端适配
离线包配置
GMU 离线包
- 📦 离线包 ID (4-8位字符)
- 📝 离线包名称
- 🔧 自动化构建配置
mPaaS 离线包
- 🔢 8位数字 ID
- 📱 支付宝小程序生态
- 🚀 快速部署
🧪 测试框架
Vitest (推荐用于 Vite 项目)
- ⚡ 基于 Vite 的测试框架
- 🔥 热重载测试
- 📊 代码覆盖率报告
Jest (适用于 Webpack 项目)
- 🧪 成熟的测试框架
- 📷 快照测试
- 🎭 模拟功能
📦 企业级功能
镜像源支持
- 🏢 企业内部 npm 镜像
- 📥
.npmrc和.yarnrc配置 - 🚀 加速依赖安装
See 包支持
- 📦 企业级部署工具
- 🔧 自定义构建配置
- 🚀 一键部署流程
版本控制
- 🌿 Git 版本控制（推荐）
- 📁 SVN 版本控制
- 🔄 自动初始化仓库
🚀 开发脚本
生成的项目包含以下 npm 脚本：
# 开发环境
npm run dev
# 构建生产版本
npm run build
# 代码检查
npm run lint
# 单元测试
npm run test
# 代码格式化
npm run format📖 版本要求
- Node.js: ^14.13.1 || >=16.0.0
- npm: 6.0+
- yarn: 1.22+ (可选)
- pnpm: 7.0+ (可选)
🤝 贡献指南
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开一个 Pull Request
📄 许可证
本项目基于 MIT 许可证开源。
🔗 相关链接
👥 贡献者
感谢所有为这个项目做出贡献的开发者！
Happy Coding! 🎉