在前端开发领域，新建一个项目时通常需要进行一系列的配置和安装工作，这是一个繁琐的过程。为了方便开发者快速搭建项目，npm 上出现了许多项目脚手架，比如 create-react-app 和 vue-cli。其中，generator-new-project 是一款集成了 React、Vue 和 Angular 的项目脚手架，可以快速创建基于新框架的项目。
优势
- 集成了 React、Vue 和 Angular，方便开发者快速切换
- 使用了最新的项目结构和最佳实践
- 支持多种 CSS 预处理器
- 支持多国语言
安装
使用 npm 进行安装：
npm install -g generator-new-project
使用
新建项目
在命令行中输入以下命令：
yo new-project
根据提示输入项目名称和描述信息，选择所需的框架和 CSS 预处理器，即可自动生成项目。
添加页面
在项目目录中，输入以下命令：
yo new-project:page
根据提示输入页面名称、路径和所属模块，即可自动生成页面。
添加组件
在项目目录中，输入以下命令：
yo new-project:component
根据提示输入组件名称、路径和所属模块，即可自动生成组件。
添加模块
在项目目录中，输入以下命令：
yo new-project:module
根据提示输入模块名称、路径和依赖信息，即可自动生成模块。
示例
以下是在 generator-new-project 上创建 Vue 项目的示例代码：
- 全局安装
generator-new-project：
npm install -g generator-new-project
- 创建新项目，选择 Vue 和 Sass：
yo new-project
- 添加页面，输入页面名称
about：
yo new-project:page
- 添加组件，输入组件名称
header：
yo new-project:component
- 添加模块，输入模块名称
api，选择 Axios 作为依赖：
yo new-project:module
经过以上步骤后，我们就得到了一个基于 Vue 和 Sass 的新项目，并且包含了一个名为 about 的页面、一个名为 header 的组件以及一个名为 api 的模块。接下来就可以根据需要进行开发和配置。
结语
通过使用 generator-new-project，我们可以大大节省项目搭建和配置的时间，快速开始开发工作。同时，该工具本身也集成了最新的项目结构和最佳实践，可以帮助我们养成良好的编码习惯和开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562681e8991b448d311d