ember.jsember.js入門


備註

本節概述了ember.js是什麼,以及開發人員可能想要使用它的原因。

它還應該提到ember.js中的任何大型主題,並鏈接到相關主題。由於ember.js的文檔是新的,您可能需要創建這些相關主題的初始版本。

版本

最新發布

發布日期
2.14.0 beta 2017年4月29日
2.13.0 2017年4月29日

安裝或設置

開始使用Ember很容易。通過我們的命令行構建工具Ember CLI創建和管理Ember項目。該工具提供:

  • 現代應用程序資產管理(包括連接,縮小和版本控制)。
  • 生成器有助於創建組件,路由等。
  • 傳統的項目佈局,使現有的Ember應用程序易於接近。
  • 通過Babel項目支持ES2015 / ES6 JavaScript。這包括對本指南中使用的JavaScript模塊的支持。
  • 完整的QUnit測試工具。
  • 消耗不斷增長的Ember Addons生態系統的能力。

依賴

Node.js和npm

Ember CLI是使用JavaScript構建的,並且需要Node.js運行時。它還需要通過npm獲取的依賴項。 npm與Node.js打包在一起,所以如果你的計算機安裝了Node.js,你就可以開始了。

Ember要求Node.js為0.12或更高,npm為2.7或更高。如果您不確定是否有Node.js或正確的版本,請在命令行上運行:

node --version
npm --version

如果您收到“命令未找到”錯誤或Node的過期版本:

如果你得到過時的npm版本,請運行npm install -g npm

混帳

Ember需要Git來管理它的許多依賴項。 Git附帶Mac OS X和大多數Linux發行版。 Windows用戶可以下載並運行此Git安裝程序

守望者(可選)

在Mac和Linux上,您可以通過安裝Watchman來提高文件監視性能。

PhantomJS(可選)

您可以使用PhantomJS從命令行運行測試,而無需打開瀏覽器。請參閱PhantomJS下載說明

安裝

使用npm安裝Ember:

npm install -g ember-cli

要驗證安裝是否成功,請運行:

ember -v

如果顯示版本號,您就可以開始了。

分配localhost端口(特別是權限/可用性問題,同時運行多個ember站點)

有時,使用默認值手動分配一個或多個端口很有用。這樣做可以解決端口可用性/權限問題或一次運行多個ember實例。


要讓ember-cli嘗試識別和分配可用端口,請使用:

ember serve --port 0
 

Per ember help:“傳遞0以自動選擇可用端口”。 (在終端中,鍵入ember幫助)。


要同時運行多個ember站點,每個站點都需要自己的服務器和實時重新加載端口。一個簡單的方法:在單獨的終端窗口中導航到每個實例並使用以下命令使用自己的端口啟動它們:

ember serve --port 0 --live-reload-port 0
 

如果在任何這些情況下出現有關可用性或權限的錯誤,請在終端提示符處輸入以下python腳本以標識可用端口:

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'
 

使用結果指定您現在知道可用的端口:

ember serve --port <known_port_1> --live-reload-port <known_port_2>
 

創建應用程序

Ember CLI允許您使用以下兩個選項之一來生成新應用:

  1. 創建一個文件夾並運行ember init (生成應用程序結構並設置git並進行第一次提交)
  2. 運行ember new <app name> (創建一個具有指定名稱的文件夾,進入它並運行ember init

生成過程完成後,通過運行以下命令在app文件夾中引導實時重新加載服務器:

ember server
 

或簡稱為ember s 。 * Ta-da,現在你有一個正在運行的Ember應用程序! 官方文件

創建第一個模板

讓我們使用ember generate 命令創建一個新模板。

ember generate template application
 

當用戶訪問您的應用程序時, application 模板始終在屏幕上。在您選擇的編輯器中,打開app/templates/application.hbs 並添加以下代碼:

<h2>My first Ember application</h2>

{{outlet}}
 

現在,您應該在應用程序的歡迎頁面上看到新添加的文本。另請注意,Ember會自動檢測新文件並為您重新加載頁面。乾淨吧?

部署應用程序

要部署Ember應用程序,只需將輸出從ember構建轉移到Web服務器。這可以使用標準的Unix文件傳輸工具完成,例如rsyncscp 。還有一些服務可以讓您輕鬆部署。

ember build
scp -r dist/* myserver.com:/var/www/public/
 

通常我們會使用ember build --environment=production 來做更多的ember build --environment=production 來使你的代碼準備好生產(gzip和minify代碼)。

如何使用JavaScript插件

有四種方法可以使用JavaScript插件,

  1. Ember附加組件
  2. 全局導入JavaScript插件
  3. 消費命名為AMD插件
  4. 通過ember-browserify