Ember旅程系列（一） -- 创建你的应用

英文原版：https://guides.emberjs.com/v2.13.0/tutorial/ember-cli/

欢迎加入Ember旅程！ 本次旅程的意义是向你阐述基本的Ember概念，帮你创建一个看上去是那么个性化的应用。如果你在旅程的任何环节有疑惑，因而不能让你顺利的完成旅程。那么请下载这个现成的例子。

你可以参照”快速开始“中所描述的，安装最新版本的Ember。

Ember CLI – Ember的命令行工具，它为你提供了标准的项目结构和一系列的工具。它能帮助开发者将精力集中在打包app，而不是放在其他依赖的资源上。你可以通过在命令行输入：

ember --help

来查看所有的命令。如果要想了解某个命令具体的细节，请输入：

ember help <command-name>

创建新应用

可以通过Ember CLI的 new 命令来创建项目。为了与下一节相呼应，我们在此就创建一个名叫 super-rentals的app吧。命令：

ember new super-rentals

执行命令之后，一个新的项目将出现在执行命令的文件夹路径下。现在可以就让我们cd到该项目根目录下，开始干活吧：

cd super-rentals

目录结构

new 命令会生成如下的目录结构：

|--app|--config|--node_modules|--public|--tests|--vendor<other files>ember-cli-build.jspackage.jsonREADME.mdtestem.js

在这里，让我们稍微关注一下这些生成的资源。
app： 这里用来存放你的模型，组件，路由，模板，样式文件等等。绝大多数你编写的项目代码都在这里面。

config： 这里有用来对app做配置的environments.js文件

node_modules/package.json：这个文件夹和文件来自于NPM。它是nodejs的包管理器。Ember 通过Node创建，并且被大量的Node模块辅助。 package.json文件主要包含了当前应用所需的依赖。所有已安装的 Ember CLI 插件都是会显示在这里。所有在 packages中罗列出的依赖都安装在 node_modules目录下。

public：一些比如 图片，字体的资源会放在这里。

vendor： 这里放的是一些不被 Bower go管理的前端依赖，比如：javascript ,css等。

tests/testem.js：tests文件夹中放的有自动化测试脚本；Ember CLI的测试器testem可以在testem.js中配置。

ember-cli-build.js：这个是app的描述文件。

ES6 Modules

如果你注意了app/router.js，你会发现这里的语法有些不一样：

app/router.jsimport 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(其实就是常说的ES6) 的模块来组织代码。例如，通过

import Ember from 'ember';

可以让我们通过一个变量Ember来与ember.js库交互。（此处不翻译了，说的是一些ES6语法。可自行百度）

开发用服务器

好了，一旦我们创建好了项目，接下来就让我们开启服务器来看看一些是否正常，输入命令：

ember server

或者

ember s

然后，让我们来访问下http://localhost:4200，如果一切顺利。那么将会看到默认的欢迎页面了。

然后，在开发之前，首要的事情就是打开app/templates/application.hbs。

然后去掉 {{welcome-page}}，随后应用页面随即变成了一张空的画布，可以由我们任意发挥了。

本小节完