从框架模板生成IntelliJ IDEA项目
编辑教程从框架模板生成IntelliJ IDEA项目
注意:此功能仅在 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 应用程序存根
在主菜单上选择“文件 丨新 丨项目(File 丨 New 丨 Project )” 或单击 "欢迎界面" 上的 "新建项目" 按钮。 | |
---|---|
在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 "静态站点"。 | |
在右侧窗格中,根据您的首选项和要在应用程序中实现的功能,选择要使用的模板:静态站点(Static Web):HTML5 Boilerplate:选择此选项可使用 HTML5 Boilerplate 模板。这是一个可以轻松适应您需求的起始项目模板。Web 初学者工具包:选择此选项可使用 web 初学者工具包。React 初学者工具包:选择此选项以使用 React 初学者工具包。Twitter Bootstrap:选择此选项可以使用 Twitter Bootstrap 模板,这是一个精心设计的模块化工具包,具有丰富的 HTML,CSS和 JavaScript 支持。基础:选择此选项使用基础框架。单击 "下一步",准备就绪。 | |
在向导的第二页上,指定以下内容:项目的名称和要在其中创建它的文件夹。要使用的模板的版本。在准备就绪时单击 "完成"。 |
生成一个 Node.js Express 应用程序存根
生成这样的应用程序存根要求 IntelliJ IDEA 支持 Node.js:
在您的计算机上下载并安装该 Node.js 的运行环境。
该 Node.js 资源库插件已安装并启用。该插件不与 IntelliJ IDEA 捆绑在一起,但可以从中安装 JetBrains 插件库 ,如安装,更新和卸载存储库插件并且启用和禁用插件。
生成 Node.js 应用程序存根:
在主菜单上选择“文件丨新丨项目(File 丨 New 丨 Project)”,或单击 "欢迎界面" 上的 "新建项目" 按钮。 | |
---|---|
在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 Node.js 和 NPM。 | |
在右侧窗格中,选择 Node.js Express 应用程序并单击 "下一步"。 | |
在向导的第二页上,指定以下内容:项目名称及和要在其中创建它的文件夹。对 Node.js 的可执行文件的路径 node.exe 和 到 Node.js 包管理器文件 npm.cmd。使用 Express 模板引擎。从 "模板引擎" 下拉列表中,选择以下之一: Jade - haml.js 后继者. EJS - 嵌入式 JavaScript. Hogan.js. Handlebars. |
|
单击 "完成",准备就绪。IntelliJ IDEA 启动"快速项目生成器(Express Project Generator)" 工具,它可以下载所有必需的数据,设置项目结构,并在当前窗口或新项目中打开,具体取决于您的选择。 | |
生成 Dart 应用程序存根 | |
生成 Dart 应用程序存根要求 IntelliJ IDEA 支持 Dart: |
您的计算机上提供了 Dart SDK。
已安装并启用 Dart 插件。该插件不与 IntelliJ IDEA 捆绑在一起,但可以从 JetBrains 插件库中安装,如安装,更新和卸载存储库插件并且启用和禁用插件。
生成 Dart 应用程序存根:
在主菜单上选择“文件丨 新丨项目(File 丨 New 丨 Project)”,或单击 "欢迎界面" 上的 "新建项目" 按钮。 | |
---|---|
在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择 "Dart"。 | |
在右侧窗格中,根据您要开发的应用程序的类型选择存根的类型。可用选项的数量取决于当前使用的舞台,请参见 http://stagehand.pub/ 以获取详细信息。单击 "下一步"。 | |
在向导的第二页上,指定 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 图标。
在主菜单上选择“文件 丨新 丨项目(File 丨 New 丨 Project)”或者单击 "欢迎界面"上的"新建项目"按钮。 | |
---|---|
在 "项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。 | |
在右侧窗格中,选择 Meteor JS App 并单击 "下一步"。 | |
在向导的第二页上,指定项目名称和要在其中创建的文件夹。指定 Meteor 可执行文件的位置 (请参阅安装 Meteor)。 | |
从 "模板" 下拉列表中,选择要生成的示例。要生成基本的项目结构,选择默认选项。 | |
在 "文件名" 文本框中,键入将生成的相互关联的 .js、.html 和 .css 文件。仅当从模板下拉列表中选择默认示例类型时,该文本框才可用。 |
生成 PhoneGap / Cordova / Ionic 应用程序存根
在主菜单上选择“文件 丨新 丨项目(File 丨 New 丨 Project)”或者单击 "欢迎界面"上的"新建项目"按钮。 | |
---|---|
在"项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。 | |
在右侧窗格中,选择 PhoneGap / Cordova 应用程序,然后单击 "下一步"。 | |
在向导的第二页,指定项目名称和要在其中创建的文件夹。指定可执行文件的位置: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 应用程序存根的过程:
在主菜单上选择“文件 丨新 丨项目(File 丨 New 丨 Project)”或者单击 "欢迎界面"上的"新建项目"按钮。 | |
---|---|
在"项目类别和选项" 对话框 (即 "新建项目" 向导的第一页) 中,在左侧窗格中选择静态Web。 | |
在右侧窗格中,选择 AngularJS 并单击 "下一步"。 | |
在向导的第二页上,指定项目名称和要在其中创建的文件夹。 | |
当您单击完成时,IntelliJ IDEA 会根据 AngularJS 种子项目生成具有所有必需配置文件的 AngularJS 特定的项目结构。 | |
下载包含 AngularJS 代码的 AngularJS 依赖项和支持开发和测试的工具: 打开嵌入式终端 (查看 丨工具窗口 丨终端) ,并在命令提示符下安装类型 npm。 | |
当您单击 "完成" 时,IntelliJ IDEA 生成一个 AngularJS 应用程序的框架,它具有框架特定的结构。 |
生成 Composer 项目存根
您可以使用 Composer 从现有包中生成项目存根。
在这种情况下,Composer 将被初始化,并在项目存根创建期间安装一个包。
之后,您可以从命令行或通过用户界面使用 Composer。
打开 "新建项目" 对话框,选择文件丨新建项目(File 丨 New Project)或单击 "欢迎界面"上的 "新建项目"。 | |
---|---|
在左侧窗格中选择项目类型和位置,单击列表中的 "PHP",然后在右侧窗格中选择 Composer Project,然后单击 "下一步"。在向导的第二页上,指定项目名称和将要创建的文件夹。 | |
选择 composer.phar 来使用要使用先前下载的命令 composer.phar,请选择“使用现有的 composer.phar” ,并在文本框中指定其位置。要下载 Composer 的新实例,请选择“从 getcomposer.org 下载 composer.phar”。该 composer.phar 文件将保存在项目根文件夹中指定的位置文本框。 | |
指定要使用的 PHP 解释器从列表中选择一个已配置的 php 解释器,请参阅配置远程 PHP 解释器和配置本地 PHP 解释器的详细信息。 | |
指定项目创建期间要安装的软件包,从"可用包"列表中选择要添加的包,可能使用 "搜索" 字段,然后从 "安装版本" 列表中选择相关版本。 | |
选择在 "命令行参数" 文本框中, 键入其他命令行参数。例如,要将包添加到 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应用程序存根
选择文件丨新建项目(File 丨 New Project)或单击 "欢迎界面"上的 "新建项目"。将打开 "项目类别和选项" 对话框。 | |
---|---|
在左侧窗格中, 单击列表中的 PHP,然后在右侧窗格中选择 WordPress 插件,然后单击“下一步”。 | |
在向导的第二页上,指定项目名称和将要创建的文件夹。在 WordPress 安装路径文本框中,指定安装 WordPress 的文件夹。该文件夹应包含 wp-admin 和 wp-includes 子目录。单击 "完成" 以启动项目存根生成。 | |
如果新创建的项目位于 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文件。
选择文件丨新建项目(File 丨 New Project)或单击 "欢迎界面"上的 "新建项目"。将打开 "项目类别和选项" 对话框。 | |
---|---|
在左侧窗格中,单击列表中的 PHP,然后右键单击选择 Drupal 模块,然后单击“下一步”。 | |
在向导的第二页上,指定项目名称和将要创建的文件夹。 | |
指定 Drupal 安装的根文件夹,并选择要使用的 Drupal 版本,受支持的版本为6、7 和 8。 | |
选择“设置PHP丨包含路径复选框(Set up PHP 丨 Include paths check box)”以使 Drupal 包含为项目自动配置的路径。离开对话框后,以下路径将添加到 PHP 页面上的包含路径列表中: |
选择支付方式:
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间