从框架模板生成项目 · phpstorm手册

# 从框架模板生成项目 >> 该页面中存根是stub的翻译，表示占位代码，粘合代码，残存代码, 指满足形式要求但没有实现实际功能的占坑/代理代码。 >> stub：n. 存根；烟蒂；树桩；断株 >> vt. 踩熄；连根拔除 >> n. (Stub)人名；(挪、瑞典)斯图布 ---- 在这个页面中： * [概述](#概述) * [生成HTML5 Boilerplate，Web启动套件，React启动套件，Twitter Bootstrap或基础应用存根](#生成HTML5BoilerplateWeb启动套件React启动套件TwitterBootstrap或基础应用存根) * [生成Node.js Express应用存根](#生成NodejsExpress应用存根) * [生成Dart应用存根](#生成Dart应用存根) * [生成Meteor应用存根](#生成Meteor应用存根) * [生成PhoneGap/Cordova/Ionic应用存根](#生成PhoneGap_Cordova_Ionic应用存根) * [生成AngularJS应用存根](#生成AngularJS应用存根) * [生成Compress项目存根](#生成Compress项目存根) * [生成WordPress应用存根](#生成WordPress应用存根) * [生成Drupal模块存根](#生成Drupal模块存根) * [生成Joomla!项目存根](#生成Joomla项目存根) ## 概述 在项目创建期间，PhpStorm可以为开发Web应用生成项目存根。项目结构是生成好的并且一些代码已经生成基于你需要的已经下载好的外部模板和框架。 PhpStorm基于以下模板生成项目存根： * [Composer](http://getcomposer.org/)项目. * [Drupal](https://drupal.org/)模块. * [WordPress](https://wordpress.org/)项目. * [HTML5 Boilerplate](http://html5boilerplate.com/), [Twitter Bootstrap](http://twitter.github.com/bootstrap/),和客户端[Foundation](http://foundation.zurb.com/)应用存根. * [Node.js Express](http://expressjs.com/)服务端应用，使用[Node.js](http://nodejs.org/).和[Node.js Boilerplate](https://github.com/robrighter/node-boilerplate) * [Dart](http://www.dartlang.org/)客户端应用程序开发的Web应用程序存根。 * [Meteor](https://www.meteor.com/)服务端和客户端的应用项目存根。 * [PhoneGap](http://phonegap.com/)/[Apache Cordova](http://cordova.apache.org/)/[Ionic](http://ionicframework.com/)项目存根。 * [AngularJS](http://angularjs.org/)项目存根. ## 生成HTML5 Boilerplate，Web启动套件，React启动套件，Twitter Bootstrap或基础应用存根 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板，根据喜好选择你要使用的模板和在你的应用程序中要实现的功能： * **Empty**：选择这个选项来仅获得一个项目文件夹，不包含任何内容 * **Composer Project**：选择这个选项来使用[Composer template](#生成Compress项目存根)创建项目存根 * **Drupal Module**：选择这个选项来用[Drupal module](https://drupal.org/)创建和配置 * **HTML5 Boilerplate**：选择这个选项来使用[HTML5 Boilerplate](http://html5boilerplate.com/)模板。这是一个起始项目模板，可以让你很容易的根据需要适配。 * **Web Starter Kit**：选择这个选项来使用[Web Starter Kit](https://developers.google.com/web/tools/starter-kit/) * **React Starter Kit**：选择这个选项来使用[WReact Starter Kit](http://www.reactstarterkit.com/) * **Twitter Bootstrap**：选择这个选项来使用[Twitter Bootstrap](http://twitter.github.com/bootstrap/)模板，这是一个精心设计的模块化工具包，支持付Html，CSS金额JavaScript。 * **Foundation**：选择这个选项来使用[Foundation](http://foundation.zurb.com/)框架。 3. 右边面板中的控件取决于你选择的模板。 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. 选择要使用的模板版本并点击**Create**。 ## 生成Node.js Express应用存根 生成这样的应用存根需要PhpStorm支持Node.js： 1. 下载和安装[Node.js](http://nodejs.org/#download)实时环境到你的电脑上 2. 安装和启用**Node.js**库插件。PhpStorm没有绑定这个插件，但是你可以从**JetBrains plugin repository**中安装，参考[安装、更新和卸载库插件](/如何使用/常规指南/管理插件/安装、更新和卸载库插件.md)和[启用和禁用插件](/如何使用/常规指南/管理插件/启用和禁用插件.md)章节的描述。学习更多[Node.js](/如何使用/语言和框架-具体指南/NodeJs/README.md) 要生成Node.js应用存根： 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Node.js Express App** 3. 在右侧面板，按照以下步骤： 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. Node.js可执行文件`node.exe`的路径和[Node.js包管理器](http://npmjs.org/)文件`npm.exe`的路径 3. 要使用的Node.js模板引擎，从**Template engine**下拉列表，选择以下之一： * [Jade](http://jade-lang.com/) - haml.js successor. * [EJS](https://github.com/visionmedia/ejs) - embedded JavaScript. * [Hogan.js](http://twitter.github.io/hogan.js/). * [Handlebars](http://handlebarsjs.com/) 4. 要使用的CSS模板引擎，从**CSS engine**下拉列表，选择以下之一： * [Plain CSS](http://www.w3schools.com/css/) * [Stylus](http://learnboost.github.com/stylus/) * [Less](http://lesscss.org/) * [Compass](http://compass-style.org/) * [Sass](http://sass-lang.com/) 5. 当准备好了之后，点击**Create**。PhpStorm启动**Express Project Generator**来下载所有需要的数据，配置项目结构，并基于你的选择在新的窗口或当前窗口打开项目。 ## 生成Dart应用存根 生成Dart应用存根需要PhpStorm支持[Dart](/如何使用/语言和框架-具体指南/支持Dart/README.md)： 1. 你的电脑中[Dart SDK](http://www.dartlang.org/downloads.html)可用。 2. 安装和启用**Dart**插件。PhpStorm没有绑定这个插件，但是你可以从**JetBrains plugin repository**中安装，参考[安装、更新和卸载库插件](/如何使用/常规指南/管理插件/安装、更新和卸载库插件.md)和[启用和禁用插件](/如何使用/常规指南/管理插件/启用和禁用插件.md)章节的描述。要生成Dart应用存根： 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Dart** 3. 在右侧面板： 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. 指定**Dart SDK**和**Dartium可执行文件**的路径。PhpStorm发现和展示**Dart版本**。如果**Dart编辑包**已经下载了SDK，**Dartium**的路径也会自动被发现并被填写。 3. 要使用注释验证和断言检查，选择**Start Dartium in checked mode**复选框。学习更多关于Dartium的命令行标志查看[https://www.dartlang.org/tools/dartium/](https://www.dartlang.org/tools/dartium/) 当准备好了之后，点击**Create**。如果需要，你可以打开设置对话框的**Dart**页面，通过点击**Setting**按钮和配置命令行命令选项还有**Dartium**的用户自定义目录。 ## 生成Meteor应用存根 当你点击**Create**，PhpStorm生成一个**Meteor**应用构架，包含包含一个Html文件，一个JavaScript文件，一个CSS文件和一个子文件夹`.meteor`。`.meteor/local`文件夹，用来储存应用构建，被标记为**excluded**并且不参与索引。默认的，**excluded**在项目树中展示。要隐藏`.meteor/local`文件夹，点击项目工具窗中工具栏的![工具栏设置按钮](http://image.jellychen.cn/uploads/2016/11/viewMode.png)按钮并移除**Show Excluded Files**选项旁边的小对勾。 PhpStorm也自动附加**Meteor库**到项目中，这样启用语法高亮、解决引用和代码自动完成。更多详情参见[配置JavaScript库](/如何使用/语言和框架-具体指南/JavaScript-具体指南/配置JavaScript库.md) **Meteor**使用**Spacebars**模板，这是一个**Handlebars/Mustache**模板的扩展。PhpStorm识别**Spacebars**模板，但是作为一个副作用，在**Meteor**项目中的HTML文件被标记为**Handlebars/Mustache**的图标![Meteor文件图标](http://image.jellychen.cn/uploads/2016/11/fileTypeHandlebars.png) 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Meteor JS App** 3. 在右侧面板： 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. 指定**Meteor**可执行文件的路径(参见[安装Meteor](/如何使用/语言和框架-具体指南/JavaScript-具体指南/使用Meteor.md#安装Meteot)) 3. 从**Template**下拉列表，选择要生成的样板。要生成基础的项目结构，选择**Default**选项。 4. 在**Filename**文本框，输入名字，相应的`.js`,`.html`和`.css`文件将被生成。文本框只有在**Template**下拉列表的**Default**样板类型被选中时可用。 ## 生成PhoneGap/Cordova/Ionic应用存根 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**PhoneGap/Cordova App** 3. 在右侧面板： 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. 指定可执行文件`phonegap.cmd`,或`cordova.cmd`,或`ionic.cmd`的位置（参见[安装PhoneGap/Cordova/Ionic](/如何使用/语言和框架-具体指南/JavaScript-具体指南/使用PhoneGap_Cordova.md#安装PhoneGap_Cordova_Ionic)）当你点击**Create**，PhpStorm生成一个**PhoneGap/Cordova/Ionic**应用构架，拥有框架特定的结构。 ## 生成AngularJS应用存根 需要**AngularJS**这个插件已经安装并启用了。PhpStorm没有绑定这个插件，但是你可以从**JetBrains plugin repository**中安装，参考[安装、更新和卸载库插件](/如何使用/常规指南/管理插件/安装、更新和卸载库插件.md)和[启用和禁用插件](/如何使用/常规指南/管理插件/启用和禁用插件.md)章节的描述。要生成AngularJS应用存根： 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**AngularJS** 3. 在右侧面板： 1. 在**Location**文本框，指定项目目录的路径，即储存项目代码的位置。 2. 从**Version**下拉列表，选择分支[https://github.com/angular/angular.js](https://github.com/angular/angular.js)来下载项目要使用的模板。默认的，显示`master` 4. 当你点击**Create**。PhpStorm配置**AngularJS**特定项目结构并生成`bower.json`和`package.json`文件来定义所有需要的依赖。 5. 下载**AngularJs**依赖，包含支持开发和测试的**AngularJs**代码和工具。 1. 通过将鼠标指针指向PhpStorm左下角的![工作区显示按钮](http://image.jellychen.cn/uploads/2016/11/show_tool_window_bars.png)并从菜单中并选择**Terminal**来启动内置**Terminal**(更多详情参见[使用嵌入式本地终端](/如何使用/常规指南/使用嵌入式本地终端.md)) 2. 切换到**NPM**储存目录，如果已经添加环境变量那么可以在任意目录，参见[安装NodeJs](/如何使用/语言和框架-具体指南/NodeJs/使用Node包管理器安装和移除外部软件.md#安装Nodejs和Node包管理器) 3. 在命令行提示符处，输入以下命令： ```bash npm install ``` 学习更多关于安装依赖，参考`readme.md`文件的**Install Dependencies**章节。当你点击**Create**，PhpStorm生成**AngularJS**应用构架，拥有框架特定的结构。 ## 生成Compress项目存根 你可以用PhpStorm从现存的包生成一个项目存根通过使用**Composer**。在这种情况下，**Composer**将被初始化并且在项目存根创建期间一些包将被安装。在这之后你可以从命令行或用户界面使用**Composer**。 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Composer Project** 3. 在[右侧面板](/参考/对话框/新建项目对话框/新建项目：Composer项目.md)，在**Location**区域，指定项目将被创建的目录并提供下列**Composer**特定信息： 1. 指定**Composer**要使用的实例 * 要使用命令从以前下载的`composer.phar`文件，选择**Use existing composer.phar**，并在文本框中指定它的位置 * 要下载一个新的**Composer**实例，选择**Download composer.phar from getcomposer.org**，`composer.phar`文件将被下载到[新建项目对话框](/参考/对话框/新建项目对话框/README.md)中**Location**文本框中指定的项目根目录位置。 2. 在**Package**区域，指定在项目创建期间要安装的包。从**Available Packages**列表中选择要添加的包，可能会使用到搜索框，然后从**Version to install**下拉列表中选择相应的版本。 3. 展开**Settings**区域并指定要使用的PHP解释器的路径(详情参见[配置远程PHP解释器](/如何使用/语言和框架-具体指南/PHP-具体指南/开启PHP支持/配置远程PHP解释器.md)和[配置本地PHP解释器](/如何使用/语言和框架-具体指南/PHP-具体指南/开启PHP支持/配置本地PHP解释器.md))。在**Command line parameters**对话框，输入额外的命令行参数来调整添加依赖的过程。例如，要将包添加到`require-dev`部分而不是`require`部分，输入`-dev`。更多关于安装期间**Composer**命令行选项的信息，参见[https://getcomposer.org/doc/03-cli.md](https://getcomposer.org/doc/03-cli.md) 当你点击**Create**，`create-project`命令将被调用和选中的包。结果是创建的**Composer project**的配置和结构是基于选择的包的。详情参见[https://getcomposer.org/doc/03-cli.md#create-project](https://getcomposer.org/doc/03-cli.md#create-project)。之后PhpStorm项目就打开了。 ## 生成WordPress应用存根 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**WordPress Plugin** 3. 在右侧面板，指定项目创建的位置。在**WordPress Installation Path**文本框，指定**WordPress**安装的文件夹。该文件夹应该包含`wp-admin`和`wp-includes`子文件夹，点击**Create**来启动项目存根生成。 4. 如果新创建的项目在**WordPress**安装目录外，将它配置为**external library**通过添加它到**included path**列表。 1. 打开[设置参数对话框](/参考/设置参数对话框/README.md)通过按`Ctrl+Alt+S`或选择**File | Settings**（Windows/Linux）/**PhpStorm | Preferences**(OS X)，然后点击**Languages&Frameworks**下的**PHP** 2. 在打开的[PHP](/参考/设置参数对话框/语言和框架/PHP/README.md)页面，添加**WordPress**安装文件夹的路径到**Include Paths list**：点击![新增](http://image.jellychen.cn/uploads/2016/11/new.png)并在打开的对话框中指定安装目录的路径。学习更多在[配置包含路径](/如何使用/语言和框架-具体指南/PHP-具体指南/配置包含路径.md) ## 生成Drupal模块存根 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Drupal Module** 3. 在[右侧面板](/参考/对话框/新建项目对话框/新建项目：Drupal模块.md)，在**Location**区域，指定项目将被创建的目录并提供下列**Composer**特定信息： 1. 在**Drupal installation path**指定**Drupal**安装的根目录。手动的输入路径或点击**Browse**按钮![浏览](http://image.jellychen.cn/uploads/2016/10/browseButton.png)并在打开的对话框中选择相应的目录。 2. 选择**Set up PHP | Include paths**来自动获取项目的**Drupal include paths**配置。下列路径将被添加到设置对话框[PHP](/参考/设置参数对话框/语言和框架/PHP/README.md)页面的**Include Paths**列表中： 1. `<drupal installation root>/includes` 2. `<drupal installation root>/modules` 3. `<drupal installation root>/sites/all/modules` 在你离开对话框后**include paths**添加到列表。 3. 从**Version**下拉列表中，选择要使用的**Drupal**版本，支持的版本是6，7，和8 你可以在之后任意时间更新整体设置在**File | Settings**（Windows/Linux）/**PhpStorm | Preferences**(OS X) PhpStorm根据选择的Drupal版本生成项目存根。对于Drupal8，将生成`module_name.info.yml`文件，提供关于模块的信息。 ## 生成Joomla!项目存根 1. 在主菜单选择**File | New Project**或在欢迎界面点击**New Project**。[新建项目对话框](/参考/对话框/新建项目对话框.md)打开了: 2. 在左侧面板选择**Joomla! Integration** 3. 在[右侧面板](/参考/对话框/新建项目对话框/新建项目：Drupal模块.md)，在**Location**区域，指定项目将被创建的目录并提供下列**Joomla!**特定信息： * Joomla安装路径 * 项目类型（组件、模块或插件） PhpStorm显示提示气球关于Joomla!的代码风格、命名空间的等等的错误。这些通过点击相应的连接立即安装。这些提示信息在[状态栏](/如何使用/常规指南/用户界面引导/状态栏.md)和[事件工具窗](/参考/工具窗参考/事件日志.md)重复出现。 PhpStorm创建Joomla!项目存根包含一个PHP类`<project name>.php`和`<project name>.xml`[清单文件](https://docs.joomla.org/Manifest_files) 参考章节[PhpStorm中使用Joomla!](/如何使用/语言和框架-具体指南/PHP-具体指南/PhpStorm中使用Joomla/README.md)和[Joomla! site](https://www.joomla.org/) # 另请参阅：规程： * [创建和管理项目](/如何使用/常规指南/创建和管理项目/README.md) 参考： * [新建项目对话框](/参考/对话框/新建项目对话框.md) 概念： * [项目](/参考/要点/项目.md)