• 从框架模板生成项目
    • 概述
    • 生成HTML5 Boilerplate，Web启动套件，React启动套件，Twitter Bootstrap或基础应用存根
    • 生成Node.js Express应用存根
    • 生成Dart应用存根
    • 生成Meteor应用存根
    • 生成PhoneGap/Cordova/Ionic应用存根
    • 生成AngularJS应用存根
    • 生成Compress项目存根
    • 生成WordPress应用存根
    • 生成Drupal模块存根
    • 生成Joomla!项目存根
  • 另请参阅：

    从框架模板生成项目

    1.    该页面中存根是stub的翻译，表示占位代码，粘合代码，残存代码, 指满足形式要求但没有实现实际功能的占坑/代理代码。
    2.        stub：n. 存根；烟蒂；树桩；断株
    3.             vt. 踩熄；连根拔除
    4.             n. (Stub)人名；(挪、瑞典)斯图布

    在这个页面中：

    • 概述
    • 生成HTML5 Boilerplate，Web启动套件，React启动套件，Twitter Bootstrap或基础应用存根
    • 生成Node.js Express应用存根
    • 生成Dart应用存根
    • 生成Meteor应用存根
    • 生成PhoneGap/Cordova/Ionic应用存根
    • 生成AngularJS应用存根
    • 生成Compress项目存根
    • 生成WordPress应用存根
    • 生成Drupal模块存根
    • 生成Joomla!项目存根

    概述

    在项目创建期间，PhpStorm可以为开发Web应用生成项目存根。项目结构是生成好的并且一些代码已经生成基于你需要的已经下载好的外部模板和框架。

    PhpStorm基于以下模板生成项目存根：

    • Composer项目.
    • Drupal模块.
    • WordPress项目.
    • HTML5 Boilerplate, Twitter Bootstrap,和客户端Foundation应用存根.
    • Node.js Express服务端应用，使用Node.js.和Node.js Boilerplate
    • Dart客户端应用程序开发的Web应用程序存根。
    • Meteor服务端和客户端的应用项目存根。
    • PhoneGap/Apache Cordova/Ionic项目存根。
    • AngularJS项目存根.

    生成HTML5 Boilerplate，Web启动套件，React启动套件，Twitter Bootstrap或基础应用存根

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:

    2. 在左侧面板，根据喜好选择你要使用的模板和在你的应用程序中要实现的功能：

      • Empty：选择这个选项来仅获得一个项目文件夹，不包含任何内容
      • Composer Project：选择这个选项来使用Composer template创建项目存根
      • Drupal Module：选择这个选项来用Drupal module创建和配置
      • HTML5 Boilerplate：选择这个选项来使用HTML5 Boilerplate模板。
        这是一个起始项目模板，可以让你很容易的根据需要适配。
      • Web Starter Kit：选择这个选项来使用Web Starter Kit
      • React Starter Kit：选择这个选项来使用WReact Starter Kit
      • Twitter Bootstrap：选择这个选项来使用Twitter Bootstrap模板，这是一个精心设计的模块化工具包，支持付Html，CSS金额JavaScript。
      • Foundation：选择这个选项来使用Foundation框架。

    3. 右边面板中的控件取决于你选择的模板。

      1. 在Location文本框，指定项目目录的路径，即储存项目代码的位置。
      2. 选择要使用的模板版本并点击Create。

    生成Node.js Express应用存根

    生成这样的应用存根需要PhpStorm支持Node.js：

    1. 下载和安装Node.js实时环境到你的电脑上
    2. 安装和启用Node.js库插件。PhpStorm没有绑定这个插件，但是你可以从JetBrains plugin repository中安装，参考安装、更新和卸载库插件和启用和禁用插件章节的描述。

    学习更多Node.js

    要生成Node.js应用存根：

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择Node.js Express App

    3. 在右侧面板，按照以下步骤：

      1. 在Location文本框，指定项目目录的路径，即储存项目代码的位置。
      2. Node.js可执行文件node.exe的路径和Node.js包管理器文件npm.exe的路径

      3. 要使用的Node.js模板引擎，从Template engine下拉列表，选择以下之一：

        • Jade - haml.js successor.
        • EJS - embedded JavaScript.
        • Hogan.js.
        • Handlebars

      4. 要使用的CSS模板引擎，从CSS engine下拉列表，选择以下之一：

        • Plain CSS
        • Stylus
        • Less
        • Compass
        • Sass

      5. 当准备好了之后，点击Create。PhpStorm启动Express Project Generator来下载所有需要的数据，配置项目结构，并基于你的选择在新的窗口或当前窗口打开项目。

    生成Dart应用存根

    生成Dart应用存根需要PhpStorm支持Dart：

    1. 你的电脑中Dart SDK可用。
    2. 安装和启用Dart插件。PhpStorm没有绑定这个插件，但是你可以从JetBrains plugin repository中安装，参考安装、更新和卸载库插件和启用和禁用插件章节的描述。

    要生成Dart应用存根：

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    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/
        当准备好了之后，点击Create。

    如果需要，你可以打开设置对话框的Dart页面，通过点击Setting按钮和配置命令行命令选项还有Dartium的用户自定义目录。

    生成Meteor应用存根

    当你点击Create，PhpStorm生成一个Meteor应用构架，包含包含一个Html文件，一个JavaScript文件，一个CSS文件和一个子文件夹.meteor。.meteor/local文件夹，用来储存应用构建，被标记为excluded并且不参与索引。

    默认的，excluded在项目树中展示。要隐藏.meteor/local文件夹，点击项目工具窗中工具栏的工具栏设置按钮按钮并移除Show Excluded Files选项旁边的小对勾。

    PhpStorm也自动附加Meteor库到项目中，这样启用语法高亮、解决引用和代码自动完成。更多详情参见配置JavaScript库

    Meteor使用Spacebars模板，这是一个Handlebars/Mustache模板的扩展。PhpStorm识别Spacebars模板，但是作为一个副作用，在Meteor项目中的HTML文件被标记为Handlebars/Mustache的图标Meteor文件图标

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择Meteor JS App

    3. 在右侧面板：

      1. 在Location文本框，指定项目目录的路径，即储存项目代码的位置。
      2. 指定Meteor可执行文件的路径(参见安装Meteor)
      3. 从Template下拉列表，选择要生成的样板。要生成基础的项目结构，选择Default选项。
      4. 在Filename文本框，输入名字，相应的.js,.html和.css文件将被生成。文本框只有在Template下拉列表的Default样板类型被选中时可用。

    生成PhoneGap/Cordova/Ionic应用存根

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择PhoneGap/Cordova App

    3. 在右侧面板：

      1. 在Location文本框，指定项目目录的路径，即储存项目代码的位置。
      2. 指定可执行文件phonegap.cmd,或cordova.cmd,或ionic.cmd的位置（参见安装PhoneGap/Cordova/Ionic）

    当你点击Create，PhpStorm生成一个PhoneGap/Cordova/Ionic应用构架，拥有框架特定的结构。

    生成AngularJS应用存根

    需要AngularJS这个插件已经安装并启用了。PhpStorm没有绑定这个插件，但是你可以从JetBrains plugin repository中安装，参考安装、更新和卸载库插件和启用和禁用插件章节的描述。

    要生成AngularJS应用存根：

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择AngularJS

    3. 在右侧面板：

      1. 在Location文本框，指定项目目录的路径，即储存项目代码的位置。
      2. 从Version下拉列表，选择分支https://github.com/angular/angular.js来下载项目要使用的模板。默认的，显示master

    4. 当你点击Create。PhpStorm配置AngularJS特定项目结构并生成bower.json和package.json文件来定义所有需要的依赖。

    5. 下载AngularJs依赖，包含支持开发和测试的AngularJs代码和工具。

      1. 通过将鼠标指针指向PhpStorm左下角的工作区显示按钮并从菜单中并选择Terminal来启动内置Terminal(更多详情参见使用嵌入式本地终端)
      2. 切换到NPM储存目录，如果已经添加环境变量那么可以在任意目录，参见安装NodeJs

      3. 在命令行提示符处，输入以下命令：

        1.  npm install

        学习更多关于安装依赖，参考readme.md文件的Install Dependencies章节。

    当你点击Create，PhpStorm生成AngularJS应用构架，拥有框架特定的结构。

    生成Compress项目存根

    你可以用PhpStorm从现存的包生成一个项目存根通过使用Composer。在这种情况下，Composer将被初始化并且在项目存根创建期间一些包将被安装。在这之后你可以从命令行或用户界面使用Composer。

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择Composer Project

    3. 在右侧面板，在Location区域，指定项目将被创建的目录并提供下列Composer特定信息：

      1. 指定Composer要使用的实例

        • 要使用命令从以前下载的composer.phar文件，选择Use existing composer.phar，并在文本框中指定它的位置
        • 要下载一个新的Composer实例，选择Download composer.phar from getcomposer.org，composer.phar文件将被下载到新建项目对话框中Location文本框中指定的项目根目录位置。
      2. 在Package区域，指定在项目创建期间要安装的包。从Available Packages列表中选择要添加的包，可能会使用到搜索框，然后从Version to install下拉列表中选择相应的版本。
      3. 展开Settings区域并指定要使用的PHP解释器的路径(详情参见配置远程PHP解释器和配置本地PHP解释器)。在Command line parameters对话框，输入额外的命令行参数来调整添加依赖的过程。例如，要将包添加到require-dev部分而不是require部分，输入-dev。更多关于安装期间Composer命令行选项的信息，参见https://getcomposer.org/doc/03-cli.md

    当你点击Create，create-project命令将被调用和选中的包。结果是创建的Composer project的配置和结构是基于选择的包的。详情参见https://getcomposer.org/doc/03-cli.md#create-project。之后PhpStorm项目就打开了。

    生成WordPress应用存根

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择WordPress Plugin
    3. 在右侧面板，指定项目创建的位置。在WordPress Installation Path文本框，指定WordPress安装的文件夹。该文件夹应该包含wp-admin和wp-includes子文件夹，点击Create来启动项目存根生成。

    4. 如果新创建的项目在WordPress安装目录外，将它配置为external library通过添加它到included path列表。

      1. 打开设置参数对话框通过按Ctrl+Alt+S或选择File | Settings（Windows/Linux）/PhpStorm | Preferences(OS X)，然后点击Languages&Frameworks下的PHP
      2. 在打开的PHP页面，添加WordPress安装文件夹的路径到Include Paths list：点击新增并在打开的对话框中指定安装目录的路径。学习更多在配置包含路径

    生成Drupal模块存根

    1. 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
    2. 在左侧面板选择Drupal Module

    3. 在右侧面板，在Location区域，指定项目将被创建的目录并提供下列Composer特定信息：

      1. 在Drupal installation path指定Drupal安装的根目录。手动的输入路径或点击Browse按钮浏览并在打开的对话框中选择相应的目录。

      2. 选择Set up PHP | Include paths来自动获取项目的Drupal include paths配置。下列路径将被添加到设置对话框PHP页面的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。新建项目对话框打开了:
    2. 在左侧面板选择Joomla! Integration

    3. 在右侧面板，在Location区域，指定项目将被创建的目录并提供下列Joomla!特定信息：

      • Joomla安装路径

      • 项目类型（组件、模块或插件）

        PhpStorm显示提示气球关于Joomla!的代码风格、命名空间的等等的错误。这些通过点击相应的连接立即安装。这些提示信息在状态栏和事件工具窗重复出现。

    PhpStorm创建Joomla!项目存根包含一个PHP类<project name>.php和<project name>.xml清单文件

    参考章节PhpStorm中使用Joomla!和Joomla! site

    另请参阅：

    规程：

    • 创建和管理项目

    参考：

    • 新建项目对话框

    概念：

    • 项目