新建项目对话框

空项目

选择此选项以仅获取一个不包含任何内容的项目文件夹。 请在 位置 字段中指定项目文件夹的路径，然后单击 创建。

Angular CLI

选择此选项可获取一个项目样板，之后可以使用 Angular CLI 命令行界面自动生成特定结构，如 Classes、 Components、 Routes、 Pipes、 Services 等。

在右侧窗格中：

1. 指定用于存储项目相关文件的文件夹路径。

2. 在 Node Interpreter 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器，或选择 添加 以配置新的解释器。

3. 从 Angular CLI 列表中选择 npx --package @angular/cli ng。

   或者，对于 npm 5.1 及更早版本，可通过在 终端 Alt+F12 中运行 npm install -g @angular/cli 命令自行安装 @angular/cli 包。 在创建应用程序时，选择存放 @angular/cli 包的文件夹。

4. 可选：

   • 在 附加参数 字段中，指定要传递给 Angular CLI 的额外 ng new options。 此字段支持代码补全：在开始输入选项名称或按下 Ctrl+Space 时，WebStorm 会显示可用选项及其描述。

   • 如果您使用的是 Angular version 16 或更高版本，您还可以选择 使用独立组件创建新项目 复选框。 详细信息请参阅 Angular 官方网站。

Bootstrap

选择此选项可基于 Bootstrap 模板创建项目、配置其结构并生成部分源文件。

在右侧窗格中：

1. 指定用于存储项目相关文件的文件夹路径。

2. 从 版本 列表中选择要使用的模板版本，然后单击 创建。

Cordova

选择此选项以基于 PhoneGap 或 Apache Cordova 框架设置项目结构并生成部分源文件。 详细信息请参阅 PhoneGap 与 Cordova。

在右侧窗格中：

1. 指定用于存储项目相关文件的文件夹路径。

2. 指定可执行文件的位置。 根据您的操作系统和目标平台，该文件可能是 phonegap 、 phonegap.cmd 、 cordova 或 cordova.cmd 。

Dart

选择此选项以为 Dart 应用设置项目结构并生成部分源文件。 有关更多信息，请参阅 Dart。

Express

选择此选项可基于 Express 框架设置项目结构并生成部分项目源代码。

在右侧窗格中：

1. 指定用于存储项目相关文件的文件夹路径。

2. Node 解释器，请参阅 配置本地 Node.js 解释器。

3. 要使用的包管理器 — npm 或 Yarn ，请参阅 npm、pnpm 和 Yarn。

4. express -generator。

   建议使用可下载并运行生成器的 npx。 为此，请从 express -generator 列表中选择 npx --package express-generator express。

   或者，打开嵌入式 终端 （Alt+F12 ），输入 npm install --g express-generator ，然后从 express-generator 列表中选择已下载的生成器。

5. 要使用的 Express 模板引擎。 从 模板引擎 列表中选择下列项之一：

   • Dust

   • EJS

   • Handlebars

   • Hogan.js

   • Pug （Pug(Jade)）

   • Twig

   • Vash

   • 静态 html

6. 要使用的 CSS 引擎。 从 CSS 引擎 列表中选择以下之一：

   • 纯 CSS

   • Stylus

   • Less

   • Sass。

HTML5 Boilerplate

选择此选项可根据 HTML5 Boilerplate 模板设置项目结构并生成部分源文件。

要在现有项目中开始使用 HTML5 Boilerplate，请从 HTML5 Boilerplate 官网下载最新稳定版本并解压至您的项目中。 或者，打开嵌入式 终端 （Alt+F12 ），然后在命令提示符中键入 npm install html5-boilerplate。

在右侧窗格中：

1. 指定存储项目相关文件的文件夹路径。

2. 从 版本 列表中选择要使用的模板版本并单击 创建。

Meteor

选择此选项可根据 Meteor 框架设置项目结构并生成部分源文件。 了解详情请参见 Meteor。

在右侧窗格中：

1. 指定存储项目相关文件的文件夹路径。

2. 指定 Meteor 可执行文件的位置（请参阅 安装 Meteor）。

3. 从 模板 列表中选择要生成的示例。 要生成基本项目结构，请选择 默认 选项。

4. 在 文件名 字段中，键入将要生成的相互关联的 .js 、 .html 和 .css 文件的名称。 仅当从 模板 下拉列表中选择了 默认 示例类型时，该字段才可用。

Next.js

选择此选项可根据 Next.js 框架设置项目结构并生成部分源文件。

在右侧窗格中，指定项目名称及其创建文件夹、要使用的 Node.js 解释器，以及要使用的 create-next-app 包（建议从列表中选择 npx create-next-app）。 了解详情请参见 Next.js。

Node.js

选择此选项以启动一个简单的 Node.js 应用程序。 WebStorm 仅运行 npm init 命令，该命令会添加一个 package.json 文件，并启用对 Node.js 核心 API 的代码补全。

在右侧窗格中，指定项目文件夹以及要使用的 Node.js 解释器。 如需了解更多信息，请参阅 配置本地 Node.js 解释器。

React

在左侧窗格中选择 Vite。

在右侧窗格中：

1. 指定存储项目相关文件的文件夹路径。

2. 在 Node Interpreter 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器，或选择 添加 配置新的解释器。

3. 从 Vite 列表中选择 npx create-vite。

4. 从 模板 列表中选择 react。

5. 可选：

   要使用 TSX 替代 JSX，请选中 创建TypeScript 项目(T) 复选框。 WebStorm 将为您的应用程序生成 .tsx 文件和一个 tsconfig.json 配置文件。

React Native

选择此选项以创建一个 React Native 应用程序。

在右侧窗格中：

1. 指定存储项目相关文件的文件夹路径。

2. 在 Node Interpreter 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器，或选择 添加 以配置新解释器。

3. 在 React Native 列表中选择 npx --package react-native-cli react-native。

   或者，对于 npm 5.1 及更早版本，可在 终端 Alt+F12 中运行 npm install -g react-native-cli ，手动安装 react-native-cli 包。 创建应用程序时，选择包含 react-native-cli 包的文件夹。

Vite

选择此选项以创建使用 Vite 模块打包器构建的项目。 详细信息请参阅 Vite。

Vue.js

选择此选项可以使用 Vue CLI 创建 Vue.js 应用程序。

在右侧窗格中：

1. 指定存储项目相关文件的文件夹路径。

2. 在 Node Interpreter 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器，或选择 添加 以配置新解释器。

3. 在 Vue CLI 列表中，选择 npx create-vue （推荐）或 npx --package @vue/cli vue。

   或者，对于 npm 5.1 及更早版本，在命令行 shell 或 终端 Alt+F12 中运行 npm install --g create-vue 或 npm install --g @vue/cli 以手动安装该包。 创建应用程序时，选择包含该包的文件夹。

4. 如需使用 babel 和 ESLint 引导应用程序，请选择 使用默认项目设置 复选框。

Yeoman

选择此选项以使用 Yeoman 工具生成面向特定框架的项目模板界面。

右侧窗格显示所有先前安装的 Yeoman generator。 从列表中选择所需的 generator，点击 下一步 ，然后按照 Yeoman 中的说明继续操作。