tutorial的？tutorial大纲

大家好，今天给各位分享tutorial的的一些知识，其中也会对tutorial大纲进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

本章节将带着你从安装EmberCLI开始，到创建一个新的Ember项目，并且往项目里面添加基础模板、CSS样式等。直到本章结束时，你的项目会有如下一个可爱的主页——上面是Tomster教授的图片。

在之前的文章其实已经学习过上面的步骤，本篇再带你从头开始创建一个新的项目。名为SuperRentals。

通过npm命令安装，如果你本机没有安装npm请自行百度，也很简单，下载一个nodejs，配置一下环境变量就可以了。

npminstall-gember-cli

安装完毕之后运行查询命令验证是否安装成功。

ember-v

可以看到如下版本信息，这个是我本机的，每个人的安装版本有可能不同。但是只要能看到这三个软件的版本信息说明环境搭建成功，继续往下走。gogogo。。。

ember-cli:3.18.0\nnode:12.3.1\nos:darwinx64使用EmberCLI创建新项目

我们通过EmberCLI创建一个名为super-rentals的项目。通过cd命令进入你要创建项目的目录，执行如下命令。

embernewsuper-rentals

执行完创建命令之后，大概2分钟左右（依赖网速而定，如果非常慢请修改npm库改阿里云的）创建完成。创建完成之后在当前目录下自动创建一个名为super-rentals的文件夹。

如下截图是我本机创建项目的日志。

super-rentals\n├──app\n│├──components\n││└──.gitkeep\n│├──controllers\n││└──.gitkeep\n│├──helpers\n││└──.gitkeep\n│├──models\n││└──.gitkeep\n│├──routes\n││└──.gitkeep\n│├──styles\n││└──app.css\n│├──templates\n││└──application.hbs\n│├──app.js\n│├──index.html\n│└──router.js\n├──config\n│├──environment.js\n│├──optional-features.json\n│└──targets.js\n├──public\n│└──robots.txt\n├──tests\n│├──helpers\n││└──.gitkeep\n│├──integration\n││└──.gitkeep\n│├──unit\n││└──.gitkeep\n│├──index.html\n│└──test-helper.js\n├──vendor\n│└──.gitkeep\n├──.editorconfig\n├──.ember-cli\n├──.eslintignore\n├──.eslintrc.js\n├──.gitignore\n├──.template-lintrc.js\n├──.travis.yml\n├──.watchmanconfig\n├──README.md\n├──ember-cli-build.js\n├──package.json\n├──package-lock.json\n└──testem.js\n\n15directories,32files

在后续的学习过程中，我们会逐步了解到这些文件和文件夹的用途，现在我们先不关注其他的，暂时只要把重心放在app这一个目录。

通过cd命令进入到super-rentals。然后在目录下执行emberserver命令（简写方式embers也是可以的)，启动完毕之后可以看到buildsuccessful关键字信息。

embers命令是以开发环境的方式启动项目，启动过程需要编译项目文件需要一些时间，但是也就是几秒钟的事情，可以说是非常快的。启动完毕之后，直接访问项目首页，访问地址是：http://localhost:4200/

现在是通过localhost地址访问的，意味着这只是一个本机才能访问的环境，如果需要通过外部网络访问通常你需要把你的应用部署到一些主机上面，部署在生产环境会在本章节的第二部分介绍。

如果你要关闭运行的项目直接通过ctrl+c终止服务即可。

在开发模式下，我们的项目文件发生变化会自动编译，自动刷新浏览器页面。现在修改一下app/templates/application.hbs这个文件。

把里面默认的欢迎页面删除，然后加上一个行HelloWorld！！

//app/templates/application.hbs\n\nHelloWorld!!!

保存文件，等待几秒钟项目会自动编译。并且浏览器页面也不用你手动刷新，Ember开发工具会自动刷新浏览器页面。浏览器刷新完成后，可以看到首页变成了HelloWorld！！！

验证完成之后我们把application.hbs删除了，这个文件后面的不需要用了。删除之后，浏览器自动刷新完毕，页面是一个空白的。

在app/templates目录下新建一个index.hbs文件。然后在这个文件中添加一个欢迎信息。

{{!--index.hbs是"/"这个路径默认的页面。--}}\n\n<divclass="jumbo">\n\n<divclass="righttomster"></div>\n\n<h2>WelcometoSuperRentals!</h2>\n\n<p>Wehopeyoufindexactlywhatyou'relookingforinaplacetostay.</p>\n\n</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{\nbackground:url(../assets/images/teaching-tomster.png);\nbackground-size:contain;\nbackground-repeat:no-repeat;\nheight:200px;\nwidth:200px;\n\nposition:relative;\ntop:-25px;\n}

如果你注意到CSS样式的内容会发现里面引入了一张图片，并且指定了图片的目录../assets/images/teaching-tomster.png。但是项目并没有这样的目录怎么办呢？？

莫慌，Ember默认了静态资源存放的目录，就是放在public目录下面，我们手动在public目录下创建assets/images这个目录，然后把图片下载到这个目录下面。图片下载地址：https://gitee.com/ubuntuvim/ember-resource/blob/master/images/teaching-tomster.png

EmberCLI默认会从public/assets目录下寻找静态资源。包括自定义的图片、css样式等。你可以直接访问http://localhost:4200/assets/images/teaching-tomster.png，可以看到刚刚下载的图片。

图片资源需要手动刷新浏览器才能起效果。刷新完页面后可以看到在首页的右侧图片。是不是非常可爱。

关于本次tutorial的和tutorial大纲的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。