欢迎来到Ember的世界！本篇将带你创建一个简单的Ember应用，每一步操作都有相关完整的代码，你可以完全按照着我的步骤来做。
步骤大纲：
安装Ember创建一个Ember应用定义一个路由编写一个UI组件打包并发布Ember应用部署到远程服务器安装Ember
直接通过如下命令就可以安装Ember开发环境。
npm install -g ember-cli安装的前提是你的电脑已经安装好了npm，如果你还没安装过npm，那么你可以按照这个地址的教程安装npm，
https://www.npmjs.cn/getting-started/installing-node/也可以自定百度npm安装，非常简单。下载一个广电大流量卡nodejs，然后配置环境变量就可以用了。
创建一个Ember应用
创建应用推荐你使用Ember CLI命令工具创建，只需要一个命令就可以创建一个完整的Ember应用，命令如下：
ember new ape-note3命令执行完毕之后会在执行命令的当前目录下创建一个名为apt-note3
的目录，在国内运行都比较慢，创建项目过程会下载很多npm依赖，你可以修改系统的npm依赖库地址，比如改为淘宝的npm（
https://developer.aliyun.com/mirror/NPM?from=tnpm），稍等几分钟之后会自动执行完成，如下是我本机的创建执行过程： $ ember new ape-note3 in广电大流量卡stalling app Ember CLI v3.18.0 ✨ Creating a new Ember app in /Users/ubuntuvim/code/ape-note3: create .editorconfig create .ember-cli create .eslintignore create .eslintrc.js create .template-lintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/control广电大流量卡lers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create config/environment.js create config/optional-features.json create config/targets.js create ember-cli-build.js crea广电大流量卡te .gitignore create package.json create public/robots.txt create testem.js create tests/helpers/.gitkeep create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep Installing packages… This might take a couple of minutes. npm: Installed depend广电大流量卡encies Initializing git repository. Git: successfully initialized. Successfully created project ape-note3. Get started by typing: $ cd ape-note3 $ npm start Happy coding!应用创建完毕之后，目录结构如下：
项目结构
app目录是最重要的一个目录，后续所有项目程序都会放在对应的目录下面，public
目录可以存放静态文件，比如图片，第三方CSS，第三方JavaScript文件等。config目录是项目的配置目录，通常是配置一下环境相关的东西。这些后续的文章都会讲到广电大流量卡。暂时有个大概了解。
然后进入的项目根目录，可以使用命令：cd ape-note3，进入目录之后有两种方式可以启动项目。第一种是npm start，命令，第二种是ember s，命令。推荐使用第二种方式。
第一次启动项目会稍微要一点时间。当你看到Build successful 说明项目启动成功。如下是我本机的启动日志：
$ ember s Build successful (14977ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime >= 5%) | Total (avg) —————————-广电大流量卡——————————————+—————— Babel: @ember/test-helpers (2) | 3342ms (1671 ms) Babel: @ember-data/store (2) | 2078ms (1039 ms) Package /assets/vendor.js (1) | 1397ms BroccoliRollup (6) | 1305ms (217 ms) Babel: ember-inflector (1) | 754ms然后直接访问，http://localhost:4200/
就可以进入项目的主页。广电大流量卡
看到如下截图，说明你的环境搭建成功，并且应用也启动成功。恭喜你可以继续进行后面的学习了。在首页添加HTML标签
打开app/templates/application.hbs。前面的3行代码是创建项目时默认生成的欢迎首页，你可以删除掉。
{{!– The following component displays Embers default welcome message. –}} <WelcomePage /> {{!– Feel free to remove this! –}}但是要注意{{outlet}}
不能删除，这个是最顶层的占位符，所有子页面都会渲染到这个占位符上。
我们修改广电大流量卡一下application.hbs文件。加入一个h1标签。<h1>PeopleTracker</h1> {{outlet}}保存完之后项目会自动编译，并且自动刷新浏览器页面。切换到浏览器页面可以看到页面的欢迎信息已经没有了，取而代之的是刚刚加入的h1标签的内容。
定义一个路由
Ember应用中定义一个路由也是非常简单的，直接通过Ember CLI工具就可以创建，仍然是在项目根目录下，执行如下命令即可创建一个路由。
ember generate route scientists 或者简写成如下命令也可以。 ember g route scientists如下是我本机的执行过程：
$ ember g route sc广电大流量卡ientists installing route create app/routes/scientists.js create app/templates/scientists.hbs updating router add route scientists installing route-test create tests/unit/routes/scientists-test.js从执行的日志就可以看到，这个命令自动给我们创建了三个文件，一个是路由文件app/routes/scientists.js、一个是路由对应的页面文件app/templates/scientists.hbs（顺便说一句Ember框架使用ha广电大流量卡ndlebars作为页面的模板语言，更多有关handlebars可以访问https://handlebarsjs.com/），另外一个是路由对应的测试文件tests/unit/routes/scientists-test.js。更新了一个文件app/router.js
.
同时，会在文件里面生成固定类定义代码，//app/routes/scientists.js import Route from @ember/routing/route; export default class ScientistsRoute extends Route { }//app/router.js Router.map(functi广电大流量卡on() { this.route(scientists); // 自动生成的和路由文件同名的路由名称 });// app/templates/scientists.hbs {{outlet}}最后一个是路由对应的单元测试代码：
// tests/unit/routes/scientists-test.js import { module, test } from qunit; import { setupTest } from ember-qunit; module(Unit | Route | scientists, function(hooks) { setupTest(hooks); test(it e广电大流量卡xists, function(assert) { let route = this.owner.lookup(route:scientists); assert.ok(route); }); });下面开始做一下有意思的事情，在刚刚创建好的app/templates/scientists.hbs文件中添加一些HTML内容。
<h2>List of Scientists</h2>等项目自动编译完成，访问
http://localhost:4200/scientists可以看到刚刚添加h2标签的内容，展示在首页application.hbs中h1标签的下面。这是为什么呢？？
前面我有提到广电大流量卡，不能删除application.hbs文件的里面的{{outlet}}，子页面的内容都会渲染到这个占位符所在位置。你可以调整它的位置，我们把application.hbs文件的里面的{{outlet}}放在h1标签的前面看看是什么效果。
可以看到“List of Scientists”是不是展示在h1标签PeopleTracker的前面了。继续往下，我们在路由里面添加几个数据。在路由的model()方法里面，直接返回的一个人们列表。
//app/routes/scientists.js import Route from @ember/routing/route; export default class Sc广电大流量卡ientistsRoute extends Route { model() { return [Marie Curie, Mae Jemison, Albert Hofmann, 张三, ubuntuvim, xcoding.tech, 李四]; } }代码也非常简单，就是一个JavaScript数组，这个数组定义了7个字符串。在model()方法中返回的数据可以在路由同名的Hbs模板中遍历出来。当然你也可以在model()
方法里调用其他服务器API接口，动态获取数据，后续的文章会讲到怎么动态获取后端的数据。
修改路由同名的scientists.hbs，在模板中遍历路由返回的数组。// app广电大流量卡/templates/scientists.hbs<h2>List of Scientists</h2> <ul> {{! ember遍历语法，数组的遍历用#each标签，item是一个别名，就是数组的元素，这个和其他语言的for循环类似}} {{#each @model as |item|}} {{! 直接把数组的每个元素展示在页面上 }} <li>{{item}}</li> {{/each}} </ul>修改完毕之后，稍等几秒钟，项目自动刷新完毕后，可以在刚刚的页面上看到数组的每个元素内容。
{{#each}}……{{/each}}是Ember提供的数据遍历标签，整个标签的遍历广电大流量卡意思是：从回调方法model()中获取数据，并遍历每个元素。<ul>和<li>是普通的HTML标签。创建一个组件
在一个Ember应用中，一段HTML标签如果有多个地方使用，你可以定义成组件，一个组件可以在多个地方调用，并且可以往这个组件里面传递数据。创建组件也是非常简单，也是在项目根目录下通过Ember CLI命令创建。
ember g component PeopleList 或者 ember g component PeopleList如下是我本机的执行日志：
$ ember g component people-list installing component createapp/compo广电大流量卡nents/people-list.hbsskip app/components/people-list.js tip to add a class, run `ember generate component-class people-list` installing component-test create tests/integration/components/people-list-test.js命令执行完之后，会自动为我们创建一个app/components/people-list.hbs文件，和一个对应的测试文件tests/integration/components/people-li广电大流量卡st-test.js
。得到组件文件之后，我们开始做一些改造，把刚刚展示的名字列表改造成一个公用的组件。
首先把scientists.hbs的内容复制到people-list.hbs。然后使用参数替换掉里面的静态内容。// app/components/people-list.hbs {{! <h2>List of Scientists</h2>改为用参数获取的方式}} <h2>{{@title}}</h2> <ul>{{! 同样是数据的遍历，不过是改成遍历person参数}} {{#each @person as |item|}} {{! 直接把数组的每个元素展示在页广电大流量卡面上 }}<li>{{item}}</li> {{/each}} </ul>{{@title}}
是Ember提供的语法，作用是获取参数title的值。其实就是一个get操作，作用和get(title)是一样的。
仅仅是修改组件还是不够的，此时组件的参数都是空的。并且还没有任何地方调用到这个组件。下面继续修改的scientists.hbs的内容。<!– <h2>List of Scientists</h2> <ul> {{#each @model as |item|}} <li>{{item}}</li> {{广电大流量卡/each}} </ul> –> {{! 组件的名称就是创建时驼峰的命名，一定要按照大写单词的规范，不然无法识别}} <PeopleList @title=“List of Scientists” @person={{@model}} />修改完成之后，等等页面刷新，可以看到和之前一样的效果。需要注意的是模板文件的命名规范是用中划线分隔单词，组件的命名规范是大写字母分隔。这点非常重要，这个是Ember约定好的。
如果还有其他页面需要展示用户类别，那么你只需要在展示的地方再调用一次即可。<PeopleList @title=“List of Scientists” @perso广电大流量卡n={{@model}} />增加交互
接下来我们添加一个交互按钮，给每个名字增加一个鼠标点击事件。修改PeopleList组件。
// app/components/people-list.hbs {{! <h2>List of Scientists</h2>改为用参数获取的方式}} <h2>{{@title}}</h2> <ul> {{! 同样是数据的遍历，不过是改成遍历person参数}} {{#each @person as |item|}} {{! 直接把数组的每个元素展示在页面上 }} <li> <button type=“button”>{{item}}</butt广电大流量卡on> </li> {{/each}} </ul>因为还没添加任何CSS样式所以看起来比较丑，先不着急。后面我们一步步美化它。目前的按钮还是一个静态的按钮，点击它是没有任何反应的。下面给每个按钮添加一些响应行为。比如点击对应的名字是弹出一个alert对话框。
通过Ember CLI创建一个组件对应处理类。ember g component-class PeopleList如下是我本机的执行日志：
$ ember g component-class PeopleList installing component-class identical app/components/people-list.js命令执行完毕广电大流量卡之后，自动创建了一个组件类app/components/people-list.js。同时也会自动在类里面导入依赖以及定义类名称。
// app/components/people-list.js import Component from @glimmer/component; export default class PeopleListComponent extends Component { }紧接着，在这个组件类中添加一些事件响应的代码。代码也非常简答就是获取鼠标点击的人名并且通过alert对话框弹出来。
// app/components/people-list.js import Component f广电大流量卡rom @glimmer/component; import { action } from @ember/object; export default class PeopleListComponent extends Component { // 声明一个动作 @action showPerson(person) { // 自定义函数 alert(`The persons name is ${person}!`); } }在代码中多导入了一个@ember/object，然后定义了一个方法showPerson，并且传入一个参数person。另外一个非常重要的点就是@action声明，这个声明表示你可以广电大流量卡在组件中直接调用这个方法。那么怎么调用呢？？继续修改的组件的模板。
{{! <h2>List of Scientists</h2>改为用参数获取的方式}} <h2>{{@title}}</h2> <ul> {{! 同样是数据的遍历，不多改成遍历person参数}} {{#each @person as |item|}} {{! 直接把数组的每个元素展示在页面上 }} <li> <!– <button type=”button”>{{item}}</button> –> <button type=“button” {{on click (fn this.showPerson item)}}>{{广电大流量卡item}}</button> </li> {{/each}} </ul>同on关键字定义了一个鼠标单击（click）事件，事件的处理方法就是showPerson
，但是要在事件前面加上fn关键字。方法的参数放在事件后面。这个是Ember规定的写法。你可以传递多个参数，也是放在事件后面用空格隔开即可。
等待页面自动刷新，任意单击一个按钮，可以看到弹出一个对话框，上面显示了你点击的人名。
构建生产发布包
通过前面的步骤，我们已经创建了一个简单的Ember应用。紧接着，如果我要把这个应用发布到生产环境要如何处理呢？现在我们运行项目是以开发模式启动的生产环境不可能直接编译然后运行的。生产环境通常是一个打包压缩后的广电大流量卡可直接运行的代码包。
通过如下Ember CLI命令就可以打包你的项目。同样的，进入项目根目录下。执行命令，在执行命令之前先修改一个配置项。修改config/environment.js里面的locationType配置项的值为hash。
简单讲这个配置项是和访问路径有关系，改为hash之后，子路由的方位会在URL上增加一个#（http://localhost:8080/#/scientists），如果不修改这个配置发布到服务器上之后，你直接访问
http://localhost:8080/scientists会报404，或者是你直接刷新浏览器也会报404。具体原因后面文章会介绍，先稍安勿躁。 emb广电大流量卡er build–environment=production如下是我本机的执行日志
$ ember build –environment=production WARNING: Option “nodeWorker” is deprecated since workerpool@5.0.0. Please use “workerType” instead. Environment: production cleaning up… Built project successfully. Stored in “dist/”. File sizes: – dist/assets/ape-note3-5a9b3111306347132d678c1广电大流量卡dd8c0c579.js: 16.03 KB (3.28 KB gzipped) – dist/assets/ape-note3-d41d8cd98f00b204e9800998ecf8427e.css: 0 B – dist/assets/vendor-22a2fcdfadef4da4c7814c4712deef7a.js: 693.72 KB (176.65 KB gzipped) – dist/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B打包完成之后，在项目根目录下有一个dist目录，这个dist目录的内容就是可以直接发布到生产环境的文件。这个目录下主要有5个文广电大流量卡件。
打包后的项目结构
第一个是项目的所有js文件，所有js都会压缩到这个文件上。第二个是项目的css样式，所有的样式都会压缩到这个文件上。第三个是项目中Ember基础依赖，以及导入的第三方JavaScript文件会压缩到里面，第四个是项目中导入的第三方CSS库文件会压缩到此。最后一个是index.html，就是项目的首页。因为Ember应用是单页应用，所有的html内容都会自动渲染到这个文件里面。
为了演示效果，我把打包后的项目放在Tomcat(
https://tomcat.apache.org/download-90.cgi)服务器上，然后可以直接访问。如果你没有使用过Tomcat可以给我留言，广电大流量卡我教你怎么使用。 删除Tomcat根据目录下ROOT目录里面的所有文件，然后把dist下面的所有内容复制到到Tomcat的ROOT下面。启动Tomcat，访问：http://localhost:8080/，可以看到Ember应用的首页赫然在列。然后再访问子路由http://localhost:8080/#/scientists。也可以看到名字列表，并且按钮是可以点击的。
访问地址已经变成Tomcat服务地址localhost:8080
如果你有远程服务器也可以把这个Ember应用发布上去，道理是一样的。我只是用本机的服务器演示。
友情提醒： 请添加客服微信进行免费领取流量卡！
QQ交流群：226333560 站长微信：qgzmt2
原创文章，作者：sunyaqun，如若转载，请注明出处：https://www.dallk.cn/59532.html
