阅读(803) (14)

从框架模板生成IntelliJ IDEA项目

2017-10-09 14:45:13 更新
注意:此功能仅在 Ultimate 版本中受支持。

在创建 IntelliJ IDEA 项目的过程中,IntelliJ IDEA 可以生成用于开发 Web 应用程序的项目或模块存根。已经设置了项目或模块结构,并根据您的请求下载的外部模板和框架生成一些源。

基于以下框架模板生成 IntelliJ IDEA 项目或模块存根:

  • 设计者项目。
  • Drupal 模块
  • WordPress 项目。
  • HTML5 Boilerplate,Twitter Bootstrap(推特引导)和客户端应用程序存根的基础。
  • Node.js Express 用于服务器端应用程序使用 Node.js 和 Node.js Boilerplate
  • Dart Web 应用程序存根用于开发应用程序的客户端。
  • Meteor 项目存根为应用程序的客户端和服务器端。
  • PhoneGap /Apache Cordova /离子项目存根。
  • AngularJS 项目存根。

生成HTML5 Boilerplate,Web 入门工具包,React 入门工具包,Twitter Bootstrap 或 Foundation 应用程序存根

  1. 在主菜单上选择“文件 |新 |项目(File | New | Project )” 或单击 "欢迎界面" 上的 "新建项目" 按钮。
  2. 在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 "静态站点"。
  3. 在右侧窗格中,根据您的首选项和要在应用程序中实现的功能,选择要使用的模板:静态站点(Static Web):HTML5 Boilerplate:选择此选项可使用 HTML5 Boilerplate 模板。这是一个可以轻松适应您需求的起始项目模板。Web 初学者工具包:选择此选项可使用 web 初学者工具包。React 初学者工具包:选择此选项以使用 React 初学者工具包。Twitter Bootstrap:选择此选项可以使用 Twitter Bootstrap 模板,这是一个精心设计的模块化工具包,具有丰富的 HTML,CSS和 JavaScript 支持。基础:选择此选项使用基础框架。单击 "下一步",准备就绪。
  4. 在向导的第二页上,指定以下内容:项目的名称和要在其中创建它的文件夹。要使用的模板的版本。在准备就绪时单击 "完成"。

生成一个 Node.js Express 应用程序存根

生成这样的应用程序存根要求 IntelliJ IDEA 支持 Node.js:

  1. 在您的计算机上下载并安装该 Node.js 的运行环境。
  2. 该 Node.js 资源库插件已安装并启用。该插件不与 IntelliJ IDEA 捆绑在一起,但可以从中安装 JetBrains 插件库 ,如安装,更新和卸载存储库插件并且启用和禁用插件。

生成 Node.js 应用程序存根:

  1. 在主菜单上选择“文件|新|项目(File | New | Project)”,或单击 "欢迎界面" 上的 "新建项目" 按钮。
  2. 在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 Node.js 和 NPM。
  3. 在右侧窗格中,选择 Node.js Express 应用程序并单击 "下一步"。
  4. 在向导的第二页上,指定以下内容:项目名称及和要在其中创建它的文件夹。对 Node.js 的可执行文件的路径 node.exe 和 到 Node.js 包管理器文件 npm.cmd。使用 Express 模板引擎。从 "模板引擎" 下拉列表中,选择以下之一:
    • Jade - haml.js 后继者.
    • EJS - 嵌入式 JavaScript.
    • Hogan.js.
    • Handlebars.
  5. 单击 "完成",准备就绪。IntelliJ IDEA 启动"快速项目生成器(Express Project Generator)" 工具,它可以下载所有必需的数据,设置项目结构,并在当前窗口或新项目中打开,具体取决于您的选择。

生成 Dart 应用程序存根

生成 Dart 应用程序存根要求 IntelliJ IDEA 支持 Dart:

  1. 您的计算机上提供了 Dart SDK。
  2. 已安装并启用 Dart 插件。该插件不与 IntelliJ IDEA 捆绑在一起,但可以从 JetBrains 插件库中安装,如安装,更新和卸载存储库插件并且启用和禁用插件。

生成 Dart 应用程序存根:

  1. 在主菜单上选择“文件| 新|项目(File | New | Project)”,或单击 "欢迎界面" 上的 "新建项目" 按钮。
  2. 在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 "Dart"。
  3. 在右侧窗格中,根据您要开发的应用程序的类型选择存根的类型。可用选项的数量取决于当前使用的舞台,请参见 http://stagehand.pub/ 以获取详细信息。单击 "下一步"。
  4. 在向导的第二页上,指定 Dart SDK 的路径,并可以选择指定 Dartium 可执行文件(Windows 和 Linux)/ Dartium 应用程序(在 macOS 系统中)。IntelliJ IDEA 检测并显示 Dart 版本。在准备就绪时单击 "完成"。

如有必要, 可以通过单击 "设置" 按钮并为 Dartium 配置 command-line 选项和自定义用户数据目录来打开 "设置" 对话框的 Dart 页。

生成 Meteor 应用程序存根

当您单击 "完成" 时,IntelliJ IDEA 生成一个 Meteor 应用程序的框架,包括 HTML 文件,JavaScript 文件,CSS 文件和带有子文件夹的 .meteor。.meteor/local 用于存储内置应用程序的文件夹将自动标记为排除并且不涉及索引。

默认情况下,已排除的文件显示在项目树中。要将 .meteor/local 文件夹隐藏,请单击 "项目" 工具窗口工具栏上的按钮,并删除 "显示排除的文件" 选项旁边的刻度。

IntelliJ IDEA 还自动将预定义的 Meteor 库附加到项目中,从而启用语法高亮,解析参考和代码完成。有关详细信息,请参见配置 JavaScript 库

Meteor 使用空格键模板,是扩展的 Handlebars/Mustache 模板。IntelliJ IDEA 认可空格键模板,但作为一个副作用标记在 Meteor 项目中的 HTML 文件与Handlebars/Mustache 图标

  1. 在主菜单上选择“文件 |新 |项目(File | New | Project)”或者单击 "欢迎界面"上的"新建项目"按钮。
  2. 在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。
  3. 在右侧窗格中,选择 Meteor JS App 并单击 "下一步"。
  4. 在向导的第二页上,指定项目名称和要在其中创建的文件夹。指定 Meteor 可执行文件的位置 (请参阅安装 Meteor)。
  5. 从 "模板" 下拉列表中,选择要生成的示例。要生成基本的项目结构,选择默认选项。
  6. 在 "文件名" 文本框中,键入将生成的相互关联的 .js、.html 和 .css 文件。仅当从模板下拉列表中选择默认示例类型时,该文本框才可用。

生成 PhoneGap / Cordova / Ionic 应用程序存根

  1. 在主菜单上选择“文件 |新 |项目(File | New | Project)”或者单击 "欢迎界面"上的"新建项目"按钮。
  2. 在"项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。
  3. 在右侧窗格中,选择 PhoneGap / Cordova 应用程序,然后单击 "下一步"。
  4. 在向导的第二页,指定项目名称和要在其中创建的文件夹。指定可执行文件的位置:phonegap.cmd,cordova.cmd 或者 ionic.cmd (见安装PhoneGap / Cordova / Ionic)。

当您单击 "完成" 时,IntelliJ IDEA生成一个PhoneGap / Cordova / Ionic 应用程序的框架,该框架具有特定的结构。

生成 AngularJS 应用程序

这要求 AngularJS 插件已安装并启用。该插件不与 IntelliJ IDEA 捆绑在一起,但可以从 JetBrains 插件库中安装,如安装,更新和卸载存储库插件并且启用和禁用插件。

IntelliJ IDEA 可以生成一个项目存根,用于开发使用 AngularJS 的应用程序。生成一个Angular 存根,请使用 Angular CLI,见 Angular。

生成一个 Angular 1 应用程序存根的过程:

  1. 在主菜单上选择“文件 |新 |项目(File | New | Project)”或者单击 "欢迎界面"上的"新建项目"按钮。
  2. 在"项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。
  3. 在右侧窗格中,选择 AngularJS 并单击 "下一步"。
  4. 在向导的第二页上,指定项目名称和要在其中创建的文件夹。
  5. 当您单击完成时,IntelliJ IDEA 会根据 AngularJS 种子项目生成具有所有必需配置文件的 AngularJS 特定的项目结构。
  6. 下载包含 AngularJS 代码的 AngularJS 依赖项和支持开发和测试的工具: 打开嵌入式终端 (查看 |工具窗口 |终端) ,并在命令提示符下安装类型 npm。

当您单击 "完成" 时,IntelliJ IDEA 生成一个 AngularJS 应用程序的框架,它具有框架特定的结构。

生成 Composer 项目存根

您可以使用 Composer 从现有包中生成项目存根。

在这种情况下,Composer 将被初始化,并在项目存根创建期间安装一个包。

之后,您可以从命令行或通过用户界面使用 Composer。

  1. 打开 "新建项目" 对话框,选择文件|新建项目(File | New Project)或单击 "欢迎界面"上的 "新建项目"。
  2. 在左侧窗格中选择项目类型和位置,单击列表中的 "PHP",然后在右侧窗格中选择 Composer Project,然后单击 "下一步"。在向导的第二页上,指定项目名称和将要创建的文件夹。
  3. 选择 composer.phar 来使用要使用先前下载的命令 composer.phar,请选择“使用现有的 composer.phar” ,并在文本框中指定其位置。要下载 Composer 的新实例,请选择“从 getcomposer.org 下载 composer.phar”。该 composer.phar 文件将保存在项目根文件夹中指定的位置文本框。
  4. 指定要使用的 PHP 解释器从列表中选择一个已配置的 php 解释器,请参阅配置远程 PHP 解释器和配置本地 PHP 解释器的详细信息。
  5. 指定项目创建期间要安装的软件包,从"可用包"列表中选择要添加的包,可能使用 "搜索" 字段,然后从 "安装版本" 列表中选择相关版本。
  6. 选择在 "命令行参数" 文本框中, 键入其他命令行参数。例如,要将包添加到 require-dev 部分而不是默认 require 部分,请键入:--dev。有关安装过程中Composer 命令行选项的更多信息,请参阅:https://getcomposer.org/doc/03-cli.md。

当你单击 "完成" 时,create-project 使用选定的包调用该命令。这将导致创建一个 Composer 项目,其配置和结构取决于所选的包,请参阅:https://getcomposer.org/doc/03-cli.md了解详情。然后,IntelliJ IDEA 项目将打开。

生成WordPress应用程序存根

  1. 选择文件|新建项目(File | New Project)或单击 "欢迎界面"上的 "新建项目"。将打开 "项目类别和选项" 对话框。
  2. 在左侧窗格中, 单击列表中的 PHP,然后在右侧窗格中选择 WordPress 插件,然后单击“下一步”。
  3. 在向导的第二页上,指定项目名称和将要创建的文件夹。在 WordPress 安装路径文本框中,指定安装 WordPress 的文件夹。该文件夹应包含 wp-admin 和 wp-includes 子目录。单击 "完成" 以启动项目存根生成。
  4. 如果新创建的项目位于 WordPress 安装文件夹之外,则将其作为外部库进行配置,将其添加到包含的路径列表中。通过按 Ctrl+Alt+S 或选择 "设置/首选项" 对话框打开“File | Settings(文件|设置)”( Windows 和 Linux 中)或 (IntelliJ IDEA | Preferences)(在 macOS 系统中),然后单击 "语言和框架" 下的 "PHP"。在打开的 PHP 页面上,将 WordPress 安装文件夹的路径添加到包含路径列表中:单击按钮,并在打开的对话框中指定安装文件夹的路径。

生成 Drupal 模块存根

tip:IntelliJ IDEA 根据所选的 Drupal 版本生成并配置了项目存根。对于 Drupal 8,将生成一个module_name.info.yml文件。
  1. 选择文件|新建项目(File | New Project)或单击 "欢迎界面"上的 "新建项目"。将打开 "项目类别和选项" 对话框。
  2. 在左侧窗格中,单击列表中的 PHP,然后右键单击选择 Drupal 模块,然后单击“下一步”。
  3. 在向导的第二页上,指定项目名称和将要创建的文件夹。
  4. 指定 Drupal 安装的根文件夹,并选择要使用的 Drupal 版本,受支持的版本为6、7 和 8。
  5. 选择“设置PHP|包含路径复选框(Set up PHP | Include paths check box)”以使 Drupal 包含为项目自动配置的路径。离开对话框后,以下路径将添加到 PHP 页面上的包含路径列表中:<drupal installation root>/includes,<drupal installation root>/modules,和 <drupal installation root>/sites/all/modules。

稍后您可以更改 Drupal 安装并重新配置框架页上的包含路径。如何更改Drupal设置?

IntelliJ IDEA 根据所选的 Drupal 版本生成一个项目存根。对于 Drupal 8,将生成一个 module_name.info.yml 文件,其中提供了有关模块的信息。