使用ember-cli脚手架快速构建项目
步骤:
- 安装Ember。
- 创建一个新应用程序。
- 定义路由。
- 编写一个UI组件。
- 构建您的应用程序以部署到生产环境。
安装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
该命令创造了:
- 用户访问时要显示的模板
/scientists.hbs
。 - 一个
Route
是获取由模板中使用的模型对象。 - 应用程序路由器中的条目(位于
app/router.js
)。 - 此路线的单元测试。
打开新创建的模板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/
转载于:https://www.cnblogs.com/wheatCatcher/p/8480117.html
使用ember-cli脚手架快速构建项目相关推荐
- SpringBoot快速构建项目
我们再来看一下SpringBoot的快速构建项目,我们都是在集成的IDEA当中,创建一个maven project,在maven project的pom文件里呢,我们再去加SpringBoot相关的坐 ...
- 【开源项目】SpringCloud 快速构建项目脚手架工程(持续更新)
一.项目地址 https://gitee.com/smile-coding/springcloud-quick-start 二.项目说明 本项目旨在提供一个快速构建微服务的脚手架工程,不掺杂任何的复杂 ...
- Java中如何快速构建项目脚手架
文章目录 1 前言 2 微服务项目准备 3 脚手架构建 3.1 项目正常启动 && 测试用例正常 3.2 在项目的根pom中加入以下maven插件配置 3.3 执行archetype插 ...
- 转载: 我如何使用 Django + Vue.js 快速构建项目
原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...
- 7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
- 使用scaffold-eth脚手架快速构建 Web3 Dapp 应用
使用scaffold-eth脚手架快速搭建一个Web3 Dapp应用 前言 上手开发 环境要求 部署 Scaffold-eth 脚手架 通过部署的React前端应用调用合约方法 总结 关于作者 前言 ...
- 猿创征文|【Vue五分钟】 Vue Cli脚手架创建一个项目
目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...
- webpack快速构建项目
1.前(fei)言(hua) webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案.关于用webpack怎么构建项目,方法也是多种多样,五花八门.今天,我就写下我平常构 ...
- vue-cli脚手架快速搭建项目指南
vue-cli脚手架 1.学习本章前请先下载node.js 链接: https://pan.baidu.com/s/1_FLpv-uPGrsakjGd4S-KQQ?pwd=kt9e 提取码:kt9e ...
最新文章
- Mac 安装Android Studio
- 微信扫码支付功能详细教程————Java
- Python 编码规范 TODO注释
- 韦东山衔接班——4.4_构建根文件系统之构建根文件系统
- AngularJs自学心得
- Django模板中如何将函数的变量作为字典key并获取对应的value
- Python教程:网络爬虫快速入门实战解析
- 国产 Java 代码补全神器,aiXcoder 2.0 实测
- Selenium3元素定位详解与封装
- PDF417二维条码详解
- 上海计算机等级考试一级题库软件,计算机等级考试一级题库
- android开发 写一个自定义形状的按键
- pyltp实现句法分析并画出句法图
- 将 Word 转换为 Markdown格式【详细版本】2022.5.6
- 【数学-算法】1加到100的有趣算法
- Entity Framework介绍
- java经典递归 背包问题
- Sox切割脚本简单思路
- MySQL——我的学习笔记
- aspectjweaver.jar+ aopalliance.jar+mchange-commons-java.jar+cglib.jar官网下载
热门文章
- IP头,TCP头,UDP头,MAC帧头定义(转)
- 【JavaScript】重温Javascript继承机制
- Nginx进行流量copy到测试环境
- 《WCF技术内幕》翻译5:第1部分_第1章_蓝月亮:WCF介绍和本章小结
- WindowsXP操作系统进程详细介绍
- java excel工程_java工程積累——向office致敬:有一種依賴叫excel
- shell下的九大脚本实例
- oledb vc访问mdb数据库_一个通用数据库操作组件DBUtil(c#)、支持SqlServer、Oracle、Mysql、postgres、SQLITE...
- 框架下载_最新安卓XDA框架插件下载仓库
- python运行界面黑色_selenium+python 去除启动的黑色cmd窗口方法