An easy way to start a project
npm install @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：
``bash`
npm init @winner-fed/project@2 my-project
使用 yarn：
`bash`
yarn create @winner-fed/project my-project
使用 pnpm：
`bash`
pnpm create @winner-fed/project my-project
支持通过命令行参数快速创建项目：
`bash基础用法
npm init @winner-fed/project@2 my-project
#### 可用参数
| 参数 | 别名 | 描述 | 可选值 |
|------|------|------|--------|
|
| - | 选择框架 | 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 | - | 自动安装依赖 | - |$3
运行命令后，脚手架将引导您完成以下配置：
1. 项目名称 - 输入项目名称
2. 框架选择 - Vue 2、Vue 3 或小程序
3. 应用类型 - 移动端、PC端或离线包
4. TypeScript - 是否启用 TypeScript 支持
5. 构建工具 - Webpack 或 Vite
6. UI框架 - 选择合适的UI组件库
7. 布局适配 - rem 或 viewport 适配方案
8. 版本控制 - Git 或 SVN
9. 企业功能 - 镜像源、See包等
10. 微前端 - 是否支持微前端架构
11. 单元测试 - Jest 或 Vitest 测试框架
📋 支持的模板
$3
| 框架 | 版本 | 描述 |
|------|------|------|
| Vue 2 | 2.7.x | 支持 Composition API |
| Vue 3 | 3.x | 最新的 Vue 3 特性 |
| Taro | 3.x | 多端统一开发框架 |
| uni-app | 3.x | 跨平台应用开发框架 |
| Hola | - | 企业级小程序开发框架 |
$3
#### 移动端应用
- 📱 移动端 H5 应用
- 📦 H5 离线包（GMU/mPaaS）
- 🔧 自动适配不同屏幕尺寸
#### PC端应用
- 💻 桌面端 Web 应用
- 🎨 企业级管理系统
- 📊 数据可视化应用
#### 小程序
- 📲 微信小程序
- 🚀 支付宝小程序
- 📱 其他各平台小程序
$3
| UI框架 | 适用场景 | Vue 2 | Vue 3 |
|--------|----------|-------|-------|
| WinUI | 企业级移动端 | ✅ | ✅ |
| Vant | 移动端电商 | ✅ | ✅ |
| Element UI | PC端管理后台 | ✅ | ✅ |
| Ant Design Vue | PC端企业应用 | ✅ | ✅ |
| HUI | 企业级PC端 | ✅ | ❌ |
$3
#### 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 # 项目说明
⚙️ 配置说明
$3
启用 TypeScript 后，项目将包含：
-
- TypeScript 配置
- 类型定义文件 (*.d.ts)
- 完整的类型支持$3
支持以下微前端方案：
#### qiankun
- 🏠 主应用框架
- 🧩 子应用加载
- 📡 应用间通信
#### hui pro 1.0
- 🏢 企业级微前端解决方案
- 🔧 定制化配置
- 📱 移动端适配
$3
#### GMU 离线包
- 📦 离线包 ID (4-8位字符)
- 📝 离线包名称
- 🔧 自动化构建配置
#### mPaaS 离线包
- 🔢 8位数字 ID
- 📱 支付宝小程序生态
- 🚀 快速部署
🧪 测试框架
$3
- ⚡ 基于 Vite 的测试框架
- 🔥 热重载测试
- 📊 代码覆盖率报告$3
- 🧪 成熟的测试框架
- 📷 快照测试
- 🎭 模拟功能📦 企业级功能
$3
- 🏢 企业内部 npm 镜像
- 📥 .npmrc 和 .yarnrc 配置
- 🚀 加速依赖安装$3
- 📦 企业级部署工具
- 🔧 自定义构建配置
- 🚀 一键部署流程$3
- 🌿 Git 版本控制（推荐）
- 📁 SVN 版本控制
- 🔄 自动初始化仓库🚀 开发脚本
生成的项目包含以下 npm 脚本：
`bash
开发环境
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+ (可选)
🤝 贡献指南
1. Fork 本仓库
2. 创建你的特性分支 (
)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature`)本项目基于 MIT 许可证开源。
- GitHub 仓库
- npm 包
- 更新日志
- Cursor Rules 文档
- 问题反馈
感谢所有为这个项目做出贡献的开发者！
---
Happy Coding! 🎉