从框架模板生成项目
该页面中存根是stub的翻译,表示占位代码,粘合代码,残存代码, 指满足形式要求但没有实现实际功能的占坑/代理代码。
stub:n. 存根;烟蒂;树桩;断株
vt. 踩熄;连根拔除
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或基础应用存根
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
在左侧面板,根据喜好选择你要使用的模板和在你的应用程序中要实现的功能:
- 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框架。
右边面板中的控件取决于你选择的模板。
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- 选择要使用的模板版本并点击Create。
生成Node.js Express应用存根
生成这样的应用存根需要PhpStorm支持Node.js:
- 下载和安装Node.js实时环境到你的电脑上
- 安装和启用Node.js库插件。PhpStorm没有绑定这个插件,但是你可以从JetBrains plugin repository中安装,参考安装、更新和卸载库插件和启用和禁用插件章节的描述。
学习更多Node.js
要生成Node.js应用存根:
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Node.js Express App
在右侧面板,按照以下步骤:
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- Node.js可执行文件
node.exe
的路径和Node.js包管理器文件npm.exe
的路径 要使用的Node.js模板引擎,从Template engine下拉列表,选择以下之一:
- Jade - haml.js successor.
- EJS - embedded JavaScript.
- Hogan.js.
- Handlebars
要使用的CSS模板引擎,从CSS engine下拉列表,选择以下之一:
当准备好了之后,点击Create。PhpStorm启动Express Project Generator来下载所有需要的数据,配置项目结构,并基于你的选择在新的窗口或当前窗口打开项目。
生成Dart应用存根
生成Dart应用存根需要PhpStorm支持Dart:
- 你的电脑中Dart SDK可用。
- 安装和启用Dart插件。PhpStorm没有绑定这个插件,但是你可以从JetBrains plugin repository中安装,参考安装、更新和卸载库插件和启用和禁用插件章节的描述。
要生成Dart应用存根:
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Dart
在右侧面板:
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- 指定Dart SDK和Dartium可执行文件的路径。PhpStorm发现和展示Dart版本。如果Dart编辑包已经下载了SDK,Dartium的路径也会自动被发现并被填写。
- 要使用注释验证和断言检查,选择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的图标
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Meteor JS App
在右侧面板:
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- 指定Meteor可执行文件的路径(参见安装Meteor)
- 从Template下拉列表,选择要生成的样板。要生成基础的项目结构,选择Default选项。
- 在Filename文本框,输入名字,相应的
.js
,.html
和.css
文件将被生成。文本框只有在Template下拉列表的Default样板类型被选中时可用。
生成PhoneGap/Cordova/Ionic应用存根
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择PhoneGap/Cordova App
在右侧面板:
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- 指定可执行文件
phonegap.cmd
,或cordova.cmd
,或ionic.cmd
的位置(参见安装PhoneGap/Cordova/Ionic)
当你点击Create,PhpStorm生成一个PhoneGap/Cordova/Ionic应用构架,拥有框架特定的结构。
生成AngularJS应用存根
需要AngularJS这个插件已经安装并启用了。PhpStorm没有绑定这个插件,但是你可以从JetBrains plugin repository中安装,参考安装、更新和卸载库插件和启用和禁用插件章节的描述。
要生成AngularJS应用存根:
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择AngularJS
在右侧面板:
- 在Location文本框,指定项目目录的路径,即储存项目代码的位置。
- 从Version下拉列表,选择分支https://github.com/angular/angular.js来下载项目要使用的模板。默认的,显示
master
当你点击Create。PhpStorm配置AngularJS特定项目结构并生成
bower.json
和package.json
文件来定义所有需要的依赖。下载AngularJs依赖,包含支持开发和测试的AngularJs代码和工具。
当你点击Create,PhpStorm生成AngularJS应用构架,拥有框架特定的结构。
生成Compress项目存根
你可以用PhpStorm从现存的包生成一个项目存根通过使用Composer。在这种情况下,Composer将被初始化并且在项目存根创建期间一些包将被安装。在这之后你可以从命令行或用户界面使用Composer。
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Composer Project
在右侧面板,在Location区域,指定项目将被创建的目录并提供下列Composer特定信息:
指定Composer要使用的实例
- 要使用命令从以前下载的
composer.phar
文件,选择Use existing composer.phar,并在文本框中指定它的位置 - 要下载一个新的Composer实例,选择Download composer.phar from getcomposer.org,
composer.phar
文件将被下载到新建项目对话框中Location文本框中指定的项目根目录位置。
- 要使用命令从以前下载的
- 在Package区域,指定在项目创建期间要安装的包。从Available Packages列表中选择要添加的包,可能会使用到搜索框,然后从Version to install下拉列表中选择相应的版本。
- 展开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应用存根
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择WordPress Plugin
- 在右侧面板,指定项目创建的位置。在WordPress Installation Path文本框,指定WordPress安装的文件夹。该文件夹应该包含
wp-admin
和wp-includes
子文件夹,点击Create来启动项目存根生成。 如果新创建的项目在WordPress安装目录外,将它配置为external library通过添加它到included path列表。
生成Drupal模块存根
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Drupal Module
在右侧面板,在Location区域,指定项目将被创建的目录并提供下列Composer特定信息:
- 在Drupal installation path指定Drupal安装的根目录。手动的输入路径或点击Browse按钮并在打开的对话框中选择相应的目录。
选择Set up PHP | Include paths来自动获取项目的Drupal include paths配置。下列路径将被添加到设置对话框PHP页面的Include Paths列表中:
<drupal installation root>/includes
<drupal installation root>/modules
<drupal installation root>/sites/all/modules
在你离开对话框后include paths添加到列表。
从Version下拉列表中,选择要使用的Drupal版本,支持的版本是6,7,和8
你可以在之后任意时间更新整体设置在File | Settings(Windows/Linux)/PhpStorm | Preferences(OS X)
PhpStorm根据选择的Drupal版本生成项目存根。对于Drupal8,将生成module_name.info.yml
文件,提供关于模块的信息。
生成Joomla!项目存根
- 在主菜单选择File | New Project或在欢迎界面点击New Project。新建项目对话框打开了:
- 在左侧面板选择Joomla! Integration
在右侧面板,在Location区域,指定项目将被创建的目录并提供下列Joomla!特定信息:
PhpStorm创建Joomla!项目存根包含一个PHP类<project name>.php
和<project name>.xml
清单文件
参考章节PhpStorm中使用Joomla!和Joomla! site
另请参阅:
规程:
参考:
概念: