環境搭建以及使用Ember.js創建第一個靜態頁面

pinecone 發布于2019-08-19 18:21 / 2478人閱讀

摘要：原文環境搭建以及使用創建第一個靜態頁面本篇將為讀者介紹項目開發環境的搭建，并創建一個靜態頁面。在文件中增加如下內容使用快捷鍵關閉在用命令啟動項目。創建一個模板仍然是使用命令創建模板。

原文：環境搭建以及使用Ember.js創建第一個靜態頁面

本篇將為讀者介紹Ember項目開發環境的搭建，并創建一個靜態頁面。

安裝Ember CLI

本教程使用的是2.4.3版本的Ember CLI工具集，如果你的是1.13.8版本在啟動項目時會提示如下錯誤：

Future versions of Ember CLI will not support v5.9.1. Please update to Node 0.12 or io.js.

但是項目仍然可以正常訪問，不過建議還是升級到2.4.3版本，省得出現未知錯誤不好解決。
升級命令：npm install -g ember-cli@2.4.3

查看ember命令是否安裝成功，在終端或者控制臺下輸入下面的命令

ember -v

如果出現如下信息說明環境搭建成功。

version: 2.4.3
node: 5.9.1
npm: 2.13.4
os: darwin x64

如果你用的電腦不是Mac最后一行os有所不同，這個不要緊。第一行是Ember CLI的版本號，第二行是node的版本號，第三行是npm的版本號，最后一個是系統版本。

注意

如果你的執行ember -v得不到上述的版本信息也不要緊，仍然按照下面的教程新建項目新建完成項目之后再更行Ember CLI的版本，更新教程請參考Could this be a shame in the making?，只需要根據Project Update部分更新項目即可，更新到最后一步ember init時候會如下確認信息，全部y即可。

? Overwrite .travis.yml? Yes, overwrite
? Overwrite .watchmanconfig? Yes, overwrite
? Overwrite README.md? Yes, overwrite
? Overwrite app/app.js? Yes, overwrite
? Overwrite app/index.html? Yes, overwrite
? Overwrite app/router.js? Yes, overwrite
? Overwrite bower.json? Yes, overwrite
? Overwrite ember-cli-build.js? Yes, overwrite
? Overwrite package.json? Yes, overwrite
? Overwrite tests/helpers/resolver.js? Yes, overwrite
? Overwrite tests/helpers/start-app.js? Yes, overwrite
? Overwrite tests/index.html? Yes, overwrite

更新過程可能還會出現如下選擇版本的問題，請根據下面例子選擇：

Installed packages for tooling via npm.
  conflict Unable to find suitable version for qunit-notifications
    1) qunit-notifications ~0.0.6
    2) qunit-notifications ~0.1.0
? Answer 2
  conflict Unable to find suitable version for ember
    1) ember >= 1.8.1 < 2.0.0
    2) ember >=1.4 <2
    3) ember > 1.5.0-beta.3
    4) ember ~2.4.3
    5) ember >=1.4
? Answer 4
Installed browser packages via Bower.

最后驗證是否更新成功，執行ember -v會得到如下版本信息：

ubuntuvimdeMacBook-Pro:library-app ubuntuvim$ ember -v
ember-cli: 2.4.3
node: 5.9.1
os: darwin x64

更多有關開發環境的詳細介紹請看www.ember-cli.com。

創建一個新項目

安裝好開發環境之后，直接使用Ember CLI命令創建新項目。下面是創建命令：

ember new library-app

等待命令執行完成，安裝過程需要下載所必須的npm插件，跟網絡有關系，請耐心等待。

運行項目

等待項目創建完成之后就可以直接使用命令運行項目了，首先進入項目目錄下，然后執行ember cli命令運行項目。

//  進入項目目錄下
cd library-app
//  執行啟動命令
ember server

//的內容為注釋，請直接忽略。

等待啟動完畢后，打開瀏覽器執行http://localhost:4200，如果能在頁面上看到Welcome to Ember說明項目創建成功。并且可以在瀏覽器控制臺上看到如下圖的日志信息：

開啟調試模式

在開發階段最好是把打開調試模式，開啟之后可以在瀏覽器的控制臺下看到ember項目執行過程的相關信息，有助于發現問題。
修改library-app/config/environment.js文件的內容，在下面代碼段中增加配置：

// ……
if (environment === "development") {
  // ENV.APP.LOG_RESOLVER = true;
  ENV.APP.LOG_ACTIVE_GENERATION = true;
  ENV.APP.LOG_TRANSITIONS = true;
  ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
  ENV.APP.LOG_VIEW_LOOKUPS = true;
}
//……

重啟項目（按Ctrl+C終止在執行ember servere），必須重啟才能其效果，可以在瀏覽器控制臺看到了很多的日志信息。比如下圖

添加Bootstrap和Sass到項目中

為了美化項目界面引入Bootstrap，這兩個插件的安裝也是直接使用Ember CLI命令安裝，命令如下：

ember install ember-cli-sass
ember install ember-cli-bootstrap-sassy

等待安裝完成之后可以在項目目錄下的pachage.json和bower.json看到這兩個插件的配置信息。

//  bower.json
"bootstrap-sass": "^3.3.6"
// package.json
"ember-cli-sass": "5.3.1"

在項目下增加樣式文件

創建文件library-app/app/styles/app.scss，如果項目已經存在文件library-app/app/styles/app.css則重命名為app.scss，樣式會被Ember CLI引入到項目中。
在文件中增加如下內容：

@import "bootstrap";

使用快捷鍵Ctrl+C關閉在用命令ember server啟動項目。如果終端沒出現錯誤說明配置是正確的。那么請繼續往下看！！

創建項目導航條

在前面引入的了Bootstrap之后我們就可以在頁面中直接使用了，并且不需要再在頁面上引入相關的css和js文件。
打開文件library-app/app/templates/application.hbs，清空原有代碼再添加如下代碼：


    {{partial "navbar"}}
    {{outlet}}

Ember.js項目的頁面使用的是Handlebarsjs模板，{{}}是模板的語法。在Ember.js的官方參考教程中有一章是專門介紹如何使用Handlebarsjs模板的，或者根據Ember.js 入門指南之八handlebars基礎學習。
在上述代碼中{{partial}}是一個ember helper可以用于調用模板，這里就是調用了模板navbar，不過這個功能在2.4的參考文檔中移除了可以在1.13.0的文檔中看到，更多有關信息請看參考網址。
代碼中{{outlet}}也是一個helper，但是這個是一個特殊的helper，你可以把這個helper理解為一個占位符。所有子模板都會渲染到{{outlet}}所在的位置。更多信息請看Ember.js 入門指南之十四番外篇，路由、模板的執行、渲染順序。

創建一個模板

仍然是使用命令創建模板。

ember g template navbar

等待命令執行完畢之后可以看到library-app/app/templates/navbar.hbs這個文件。下面在文件中增加一個導航條。


  
    
      
      {{#link-to "index" class="navbar-brand"}}Library App{{/link-to}}

代碼中{{link-to}}是Handlebars模板的標簽，在第一個{{link-to}}標簽中index是一個路由的名字，模板被編譯之后這個標簽就轉成一個普遍HTML標簽的，如果你想指定編譯之后的標簽名請使用屬性tagName指定，比如上述代碼的第二個link-to標簽，在后面的文章中會使用組件（component）重構這個標簽。
為了美化界面在頁面的頂部加了css的填充，修改樣式文件app.scss。

@import "bootstrap";

body {
    padding-top: 20px;
}

等待項目重啟完成，可以在頁面上看到黑色的導航條，好像我們并且沒有在任何地方使用這個模板navbar，為何能在首頁上顯示呢？？其實我們已經在application.hbs中調用了！在這個模板中有這樣一句代碼{{partial "navbar"}}，在此根據模板名調用了模板navbar。如果刪除了application.hbs中的{{partial}}界面上就什么都不顯示了！請讀者自行實驗。

創建關于界面并在導航菜單上增加一個菜單項

同樣的，使用Ember CLI命令創建一個路由（route），有關路由的信息可以查看官方參考文檔或者直接看教程Ember.js 入門指南之二十路由定義，文章上有詳細的介紹，歡迎閱讀！執行下面的命令創建路由，創建路由的過程中會同時創建路由對應的模板，所以執行一個命令會得到2個文件：app/templates/about.hbs、app/routes/about.js，同時會在app/router.js中app/自動增加一條路由配置語句this.route("about");。然后在模板about.hbs中增加一些信息：

{{! app/templates/about.hbs }}

# About Page

等待項目重啟完成，執行http://localhost:4200/about可以看到剛剛在模板about.hbs中增加的信息。

但是"About Page"怎么會顯示在導航條下方呢？好像并沒有指定啊，也沒有想前面那樣使用表達式{{partial}}調用模板，有關這個內容的介紹請看Ember.js 入門指南之十四番外篇，路由、模板的執行、渲染順序，還記得在主模板application.hbs中的{{outlet}}嗎？除了application.hbs之外的所有模板都是子模板，子模板會自動渲染到父模板的{{outlet}}上。但是是如何觸發顯示的呢？很簡單，因為我們訪問了about這個路由，路由會自動根據名字查找到同名的模板并顯示（Ember默認規則）。

再創建一個模板index，仍然是使用Ember CLI命令創建，執行命令：ember g template index，得到模板后再模板內添加一些內容：

{{! app/templates/index.hbs}}

# Home Page

然后執行http://localhost:4200/，神奇的事情發生了，可以直接看到模板index的內容，并且并沒有訪問http://localhost:4200/index。這又是為什么呢？請看Ember.js 入門指南之二十路由定義中關于index路由的解釋。簡單講，index路由就是每個路由默認首頁路由，不需要手動創建，這個路由對應的URL是/，當你執行http://localhost:4200/時候實際就是執行http://localhost:4200/index然后渲染的模板就是index.hbs，所以就得到界面顯示的效果。
然后在導航欄上在添加一個鏈接，最后得打如下代碼（前后部分代碼省略）：

等待項目重啟完成，可以看到導航欄上多了一項，并且點擊“Home”和“About”看到顯示不同的內容。效果如下圖：

到此教程第一篇介紹完畢，如果你看過官方參考文件或者是看過ember teach上的教程理解起來應該是沒難度的！多一份耐心就多一份收獲。

家庭作業

最后給你留了一份作業，想學好就必須要動手實踐才行啊！！！

作業內容：

創建一個名為contact的路由和模板

在導航菜單上增加一個菜單項"Contact"，并且點擊這個菜單項看到的是模板contact.hbs的內容。

為了照顧懶人我把完整的代碼放在GitHub上，如有需要請參考參考。博文經過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大！如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力！！

云服務器 GPU云服務器騰訊云創建服務器以及配置 ember.js ember.js介紹亞馬遜云服務器租用以及使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79486.html

如何構建一個復雜的Ember.js項目

摘要：本系列教材將為讀者介紹怎么樣使用構建一個復雜的項目。本教程分為個小部分，通過這篇文章一步步為你講解怎么使用構建一個稍微復雜的項目。說明本教程是基于而作，請注意與你自己的版本區別，如果出現不兼容問題請自行升級項目。文章來源：http://xcoding.tech/tags/Ember-Demo/ 聲明：希望本系列教程能幫助更多學習Ember.js的初學者。本系列教材將為讀者介紹怎么樣...

djfml 2019-08-19 18:21 評論0 收藏0
從服務器獲取數據，引入組件

摘要：博文原址從服務器獲取數據，引入組件接著前面四篇環境搭建以及使用創建第一個靜態頁面引入計算屬性動態內容模型，保存數據到數據庫發布項目，加入功能清理模板，使用組件重構版本之后組件會越來越重要。博文原址：從服務器獲取數據，引入組件接著前面四篇：環境搭建以及使用Ember.js創建第一個靜態頁面引入計算屬性、action、動態內容模型，保存數據到數據庫發布項目，加入CRUD功能 ...

codecook 2019-08-19 18:23 評論0 收藏0
發布項目，加入CRUD功能

摘要：文章來源發布項目，加入功能接著前面三篇環境搭建以及使用創建第一個靜態頁面引入計算屬性動態內容模型，保存數據到數據庫應用發布發布方式一發布的詳細教程請看。執行如下命令發布項目。文章來源：發布項目，加入CRUD功能接著前面三篇：環境搭建以及使用Ember.js創建第一個靜態頁面引入計算屬性、action、動態內容模型，保存數據到數據庫應用發布發布方式一發布的詳細教程請看...

Genng 2019-08-19 18:23 評論0 收藏0
模型，保存數據到數據庫

摘要：文章來源模型，保存數據到數據庫環境搭建以及使用創建第一個靜態頁面引入計算屬性動態內容繼續為讀者介紹如何使用構建一個完整的復雜的項目。文章來源：模型，保存數據到數據庫環境搭建以及使用Ember.js創建第一個靜態頁面引入計算屬性、action、動態內容繼續為讀者介紹如何使用Ember構建一個完整的、復雜的項目。第一個Ember.js模型在前面兩篇中實現了如何獲取界面輸入的...

paulli3 2019-08-19 18:22 評論0 收藏0
模型高級特性，引入模型關聯關系

摘要：創建模型并設置關聯關聯關系設置模型關系一個對應多個，一個對應多個。手動在中增加關聯關系。并且是實現了數據表之間的關聯關系，比如一個對應多個，如下圖。文章來源：模型高級特性，引入模型關聯關系接著前面五篇：環境搭建以及使用Ember.js創建第一個靜態頁面引入計算屬性、action、動態內容模型，保存數據到數據庫發布項目，加入CRUD功能從服務器獲取數據，引入組件前言 ...

raise_yang 2019-08-19 18:24 評論0 收藏0