新建项目对话框

空项目

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

Angular CLI

选择此选项以获取一个模板，稍后您可以使用 Angular CLI 命令行界面自动生成特定结构，例如 类、 组件、 路由、 管道、 服务 等。

在右侧窗格中：

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

2. 在 Node.js 运行时 字段中，指定要使用的 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.js 运行时，请参阅 配置本地 Node.js 运行时。

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

4. express-generator。

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

   或者，打开嵌入的 终端 （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 引擎 列表中选择以下选项之一：

   • Plain 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.js 运行时 字段中，指定要使用的 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.js 运行时 字段中，指定要使用的 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.js 运行时 字段中，指定要使用的 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 生成器。 从列表中选择所需的生成器，点击 下一步 ，并按照 Yeoman 中的描述继续操作。