從框架模板生成項目 · 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)