本章节将带着你从安装Ember CLI开始，到创建一个新的Ember项目，并且往项目里面添加基础模板、CSS样式等。直到本章结束时，你的项目会有如下一个可爱的主页——上面是Tomster教授的图片。
本篇你将学习到如下内容：
- 安装Ember CLI
- 使用Ember CLI创建一个新项目
- 启动、停止项目
- 编辑项目文件、实时加载预览
- 添加HTML、CSS以及其他静态资源。
在之前的文章其实已经学习过上面的步骤，本篇再带你从头开始创建一个新的项目。名为Super Rentals。
安装Ember CLI
通过npm命令安装，如果你本机没有安装npm请自行百度，也很简单，下载一个nodejs，配置一下环境变量就可以了。
npm install -g ember-cli安装完毕之后运行查询命令验证是否安装成功。
ember -v可以看到如下版本信息，这个是我本机的，每个人的安装版本有可能不同。但是只要能看到这三个软件的版本信息说明环境搭建成功，继续往下走。gogogo。。。
ember-cli: 3.18.0
node: 12.3.1
os: darwin x64使用Ember CLI创建新项目
我们通过Ember CLI创建一个名为super-rentals的项目。通过cd命令进入你要创建项目的目录，执行如下命令。
ember new super-rentals执行完创建命令之后，大概2分钟左右（依赖网速而定，如果非常慢请修改npm库改阿里云的）创建完成。创建完成之后在当前目录下自动创建一个名为super-rentals的文件夹。
如下截图是我本机创建项目的日志。
项目目录结构如下：
super-rentals
├── app
│ ├── components
│ │ └── .gitkeep
│ ├── controllers
│ │ └── .gitkeep
│ ├── helpers
│ │ └── .gitkeep
│ ├── models
│ │ └── .gitkeep
│ ├── routes
│ │ └── .gitkeep
│ ├── styles
│ │ └── app.css
│ ├── templates
│ │ └── application.hbs
│ ├── app.js
│ ├── index.html
│ └── router.js
├── config
│ ├── environment.js
│ ├── optional-features.json
│ └── targets.js
├── public
│ └── robots.txt
├── tests
│ ├── helpers
│ │ └── .gitkeep
│ ├── integration
│ │ └── .gitkeep
│ ├── unit
│ │ └── .gitkeep
│ ├── index.html
│ └── test-helper.js
├── vendor
│ └── .gitkeep
├── .editorconfig
├── .ember-cli
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .template-lintrc.js
├── .travis.yml
├── .watchmanconfig
├── README.md
├── ember-cli-build.js
├── package.json
├── package-lock.json
└── testem.js
15 directories, 32 files在后续的学习过程中，我们会逐步了解到这些文件和文件夹的用途，现在我们先不关注其他的，暂时只要把重心放在app这一个目录。
启动、停止项目
通过cd命令进入到super-rentals。然后在目录下执行ember server命令（简写方式ember s也是可以的)，启动完毕之后可以看到build successful关键字信息。
如下是我本机的启动日志。
ember s命令是以开发环境的方式启动项目，启动过程需要编译项目文件需要一些时间，但是也就是几秒钟的事情，可以说是非常快的。启动完毕之后，直接访问项目首页，访问地址是：http://localhost:4200/
现在是通过localhost地址访问的，意味着这只是一个本机才能访问的环境，如果需要通过外部网络访问通常你需要把你的应用部署到一些主机上面，部署在生产环境会在本章节的第二部分介绍。
如果你要关闭运行的项目直接通过ctrl+c终止服务即可。
编辑模板、实时预览
在开发模式下，我们的项目文件发生变化会自动编译，自动刷新浏览器页面。现在修改一下app/templates/application.hbs这个文件。
把里面默认的欢迎页面删除，然后加上一个行Hello World！！
// app/templates/application.hbs
Hello World!!!保存文件，等待几秒钟项目会自动编译。并且浏览器页面也不用你手动刷新，Ember开发工具会自动刷新浏览器页面。浏览器刷新完成后，可以看到首页变成了Hello World！！！
验证完成之后我们把application.hbs删除了，这个文件后面的不需要用了。删除之后，浏览器自动刷新完毕，页面是一个空白的。
添加HTML、CSS以及其他静态资源。
在app/templates目录下新建一个index.hbs文件。然后在这个文件中添加一个欢迎信息。
{{!-- index.hbs是 "/" 这个路径默认的页面。 --}}
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome to Super Rentals!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
</div>这些标签是最基础的HTML标签，handlebars模板是无缝兼容HTML标签的。这个文件的内容都是一下静态的HTML内容，接下来会逐步改造成动态的标签。
保存文件后，您的浏览器选项卡应自动刷新，向我们显示我们刚刚处理过的欢迎消息。
现在显示的内容还是没有添加任何CSS样式的，接下来添加一下样式，让HTML内容看起来更好看。在app/styles/app.css文件中添加CSS样式，样式内容可以直接从https://gitee.com/ubuntuvim/ember-resource/blob/master/css/super-rentals-style.css下载，然后把内容复制到你的项目中。
当然你也可以自定义CSS样式，这个不是本篇的重点不过多细说。
添加完样式之后，页面看起来漂亮了不少。
.tomster {
background: url(../assets/images/teaching-tomster.png);
background-size: contain;
background-repeat: no-repeat;
height: 200px;
width: 200px;
position: relative;
top: -25px;
}如果你注意到CSS样式的内容会发现里面引入了一张图片，并且指定了图片的目录../assets/images/teaching-tomster.png。但是项目并没有这样的目录怎么办呢？？
莫慌，Ember默认了静态资源存放的目录，就是放在public目录下面，我们手动在public目录下创建assets/images这个目录，然后把图片下载到这个目录下面。图片下载地址：https://gitee.com/ubuntuvim/ember-resource/blob/master/images/teaching-tomster.png
Ember CLI默认会从public/assets目录下寻找静态资源。包括自定义的图片、css样式等。你可以直接访问http://localhost:4200/assets/images/teaching-tomster.png，可以看到刚刚下载的图片。
图片资源需要手动刷新浏览器才能起效果。刷新完页面后可以看到在首页的右侧图片。是不是非常可爱。