@winner-fed/create-project

@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

可用参数

交互式创建

运行命令后，脚手架将引导您完成以下配置：

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 测试框架

📋 支持的模板

框架支持

应用类型

移动端应用

• 📱 移动端 H5 应用
• 📦 H5 离线包（GMU/mPaaS）
• 🔧 自动适配不同屏幕尺寸

PC端应用

• 💻 桌面端 Web 应用
• 🎨 企业级管理系统
• 📊 数据可视化应用

小程序

• 📲 微信小程序
• 🚀 支付宝小程序
• 📱 其他各平台小程序

UI框架支持

构建工具

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+ (可选)

🤝 贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

🔗 相关链接

• GitHub 仓库
• npm 包
• 更新日志
• Cursor Rules 文档
• 问题反馈

👥 贡献者

感谢所有为这个项目做出贡献的开发者！

Happy Coding! 🎉