步骤:

  1. 安装Ember。
  2. 创建一个新应用程序。
  3. 定义路由。
  4. 编写一个UI组件。
  5. 构建您的应用程序以部署到生产环境。

安装Ember

您可以使用npm(Node.js包管理器,你需要安装node.js)使用单个命令来安装Ember。在终端中输入以下内容:

ember new ember-quickstart

创建一个新应用程序

一旦你通过npm安装了Ember CLI,你将可以ember在你的终端中访问一个新的命令。您可以使用该ember new命令来创建一个新的应用程序:

ember new ember-quickstart

这一个命令将创建一个新的目录,ember-quickstart并在其中创建一个新的Ember应用程序。您的应用程序将包括:

  • 一个开发服务器ember server。
  • handlebar模板编译。
  • JavaScript和CSS压缩包。
  • 通过Babel的ES2015功能(ES6)。

通过提供您需要的所有功能,您可以在集成软件包中构建适用于生产环境的Web应用程序,Ember使轻松启动新项目成为可能。

启动项目

在终端中键入cd进入应用程序目录ember-quickstart并键入以下命令来启动开发服务器:

cd ember-quickstart
ember serve

(要随时停止服务器,请在终端中键入Ctrl-C。)

在您选择的浏览器中打开http://localhost:4200。你将看到一个Ember欢迎页面,您刚刚创建并引导了您的第一个Ember应用程序。

我们将开始编辑application模板改变页面中的内容:<h1>PeopleTracker</h1>。

app/templates/application.hbs
1
2
3
<h1>PeopleTracker</h1>

{{outlet}}

定义路由

让我们构建一个显示列表的应用页面,要做到这一点就是创建一条路由进行切换。

Ember带有可以自动执行常见任务的样板代码的生成器。要生成路由,请在项目文件目录ember-quickstart中的新终端窗口中输入:

ember generate route scientists

该命令创造了:

  1. 用户访问时要显示的模板/scientists.hbs
  2. 一个Route是获取由模板中使用的模型对象。
  3. 应用程序路由器中的条目(位于app/router.js)。
  4. 此路线的单元测试。

打开新创建的模板app/templates/scientists.hbs并添加以下HTML:

app/templates/scientists.hbs
1
<h2>List of Scientists</h2>

在你的浏览器中打开http://localhost:4200/scientists。你应该看到scientists.hbs模板中的<h2>List of Scientists</h2>就在application.hbs模板内容<h1>PeopleTracker</h1>的下面:

{{outlet}}

创建一个UI组件

随着应用程序(页面路由)的增长,您会注意到您在多个页面之间共享UI元素,或在同一页面上多次使用它们。Ember可以轻松将您的模板重构为可重用组件。

我们来创建一个people-list可以在多个页面重复使用的组件来显示人员列表。输入以下内容以创建新组件:

ember generate component people-list

然后将scientists模板复制并粘贴到people-list组件的模板中并进行编辑,如下所示:

app/templates/components/people-list.hbs
1
2
3
4
5
6
7
<h2>{{title}}</h2>

<ul>
{{#each people as |person|}}
<li>{{person}}</li>
{{/each}}
</ul>
app/templates/scientists.hbs
1
2
3
4
5
6
7
8
<h2>List of Scientists</h2>

<ul>
{{#each model as |scientist|}}
<li>{{scientist}}</li>
{{/each}}
</ul>
{{people-list title="List of Scientists" people=model}}

点击事件

到目前为止,您的应用程序正在列出数据,但用户无法与信息交互。在Web应用程序中,您经常希望监听点击或悬停等用户事件。

Ember使这很容易做到,你只需要在组件中添加一个action事件:

app/components/people-list.js
1
2
3
4
5
6
7
8
9
import Component from '@ember/component';

export default Component.extend({
actions: {
showPerson(person) {
alert(person);
}
}
});

打包项目

我们已经编写了我们的应用程序并验证了它在开发中的作用,现在是时候打包部署给我们的用户直接使用了。

使用build命令打包构成应用程序的所有资产分类:JavaScript,模板,CSS,Web字体,图像等:

ember build --env production

详情可参考官方网站:https://guides.emberjs.com/v3.0.0/getting-started/quick-start/

使用ember-cli脚手架快速构建项目的更多相关文章

  1. vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

    要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...

  2. vue 概念与使用vue-cli脚手架快速构建项目

    vue 定义:是一套构建用户界面的渐进式框架,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. 数据渲染机制: 核心: 响应式数据绑定 ...

  3. 使用vue-cli脚手架快速构建项目

    1.创建一个文件夹,vscode打开 2.ctr + shift+` 打开指令窗口 3.npm i vue-cli -g   安装vue-cli 4.vue -V 测试安装版本 检查是否安装成功 5. ...

  4. 用vue-cli快速构建项目

    用vue-cli脚手架快速构建项目的过程:1.首先要在node的环境下安装: 1>安装node:https://nodejs.org/en/(带npm,但是npm太慢了,建议安装cnpm,cnp ...

  5. SpringBoot系列——快速构建项目

    前言 springboot官方参考指南:https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/ Spri ...

  6. SpringBoot:使用IDEA快速构建项目

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...

  7. 转载: 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  8. 使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

    编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compo ...

  9. 【HttpRunner v3.x】笔记 ——2. 用脚手架快速创建项目

    环境装好了,相信很多童鞋已经迫不及待的想run起来了,但是面对一个陌生的框架又无从下手.没关系,我们可以用脚手架来快速生成一个httprunner项目. 一.快速生成项目 我们不妨先输入httprun ...

随机推荐

  1. Memcached理解笔记1---安装&常规错误&监控

    一.下载 1.Libevent 简单的说就是一个事件触发的网络库,Memcached离不开它. wget http://cloud.github.com/downloads/libevent/libe ...

  2. 开始使用 Vuejs 2.0 --- 组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  3. vue 2.x之组件的数据传递(一)

    这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...

  4. 使用 Nginx + Tomcat 搭建负载均衡

    负载均衡 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 负载均衡,英文名称为Load Balance, ...

  5. UML与ER图

    UML 统一建模语言(Unified Modeling Language, UML)是一种描述软件系统结构的图形化语言. 类图 类图用于描述类之间的关系,类图中主要的关系包括: 聚集 带空心菱形的实心 ...

  6. 【转】Visio绘制WEB流程图的心得

    一个哥们在MSN上告诉我,他们公司的交互设计师只产出流程图,并问我用什么标准评价流程图的好坏.他的说法把我彻底震了-这分工也太细了吧!也不知道该说他们那里这样是好还是不好. 不过仔细想来,我倒的确没有 ...

  7. 总结 vb与数据库的连接方法

    总结 vb与数据库的连接方法 分类:vb数据库 (4672)  (38)  举报  收藏 总结:vb与数据库连接方式,两种分法. 根据是否使用ODBC(驱动程序)来分: 1.有源连接 2.无源连接. ...

  8. Angular的第一个组件

    创建组件 在vscode的命令窗口输入: ng generate component login --inline-template --inline-style 或者简写 ng g c login ...

  9. 啰里吧嗦redis

    1.redis是什么 redis官网地址 Redis is an open source (BSD licensed), in-memory data structure store, used as ...

  10. jeecg框架解决跨域问题

    controller层方法体中添加如下代码 response.setHeader("Access-Control-Allow-Origin", "*");res ...