创建应用程序

优质

小牛编辑

134浏览

2023-12-01

Ember CLI，Ember的命令行界面提供了一个标准的项目结构，一组开发工具和一个插件系统。这允许Ember开发人员专注于构建应用程序，而不是构建使它们运行的支持结构。可通过ember --help显示Ember CLI提供的命令，或通过ember help <command-name>查看特定命令的信息。

创建应用程序

$ ember new super-rentals

上述ember new命令会创建一个叫super-rentals的目录，还有一些骨架程序，然后调用npm install安装必要的依赖包。进入应用目录并开始工作：

$ cd super-rentals

new命令生成的项目目录和文件如下：

|--app
|--config
|--node_modules
|--public
|--tests
|--vendor

<other files>

ember-cli-build.js
package.json
README.md
testem.js

app：这是存储模型，组件，路由，模板和样式的文件夹和文件的地方。您在Ember项目中的大部分编码都发生在此文件夹中。

config：config目录包含environment.js，在这里可以配置应用程序设置。

node_modules/package.json：此目录和文件来自npm。npm是Node.js的包管理器。Ember使用Node构建，并使用各种Node.js模块进行操作。该package.json文件维护该应用程序的当前npm依赖关系的列表。您安装的任何Ember CLI插件也将显示在此处。列出的软件包package.json安装在node_modules目录中。

public：此目录包含图像和字体等资源。

vendor：此目录是由Bower不管理的前端依赖关系（如JavaScript或CSS）。

tests/testem.js：我们的应用程序的自动化测试会进入tests文件夹，并配置了Ember CLI的测试运行器testemtestem.js。

ember-cli-build.js：该文件描述了Ember CLI如何构建我们的应用程序。

ES6模块

看一下app/router.js文件的内容；

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

Ember CLI使用ECMAScript 2015（简称ES2015或以前称为ES6）模块来组织应用程序代码。例如，该行import Ember from 'ember';允许我们访问实际的Ember.js库作为变量Ember。该import config from './config/environment';行可让我们访问我们的应用程序的配置数据作为变量config。const是一种声明只读变量的方式，以确保它不会在其他地方重新分配。在文件的最后，export default Router;使Router此文件中定义的变量可用于应用程序的其他部分。

开发服务器

当我们生成一个新项目，可以通过启动开发服务器来检验一切是否正常：

$ ember server --host c7302.ambari.apache.org

如果不加--host参数则使用localhost主机名。
现在用浏览器打开地址http://c7302.ambari.apache.org:4200，可以看到默认欢迎页面。我们可以编辑app/templates/application.hbs文件来将欢迎页面修改成自己的内容。
打开另外的终端窗口，编辑文件app/templates/application.hbs。删除组件{ { welcome-page } }，修改为：

<h1> This my webcome page .... </h1>
{ { outlet } }

浏览器自动加载了新的模板，欢迎页变了。