start up是什么意思、读音？快速开始（quick start）

这篇文章给大家聊聊关于start up是什么意思、读音，以及快速开始（quick start）对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

欢迎来到Ember的世界！本篇将带你创建一个简单的Ember应用，每一步操作都有相关完整的代码，你可以完全按照着我的步骤来做。

直接通过如下命令就可以安装Ember开发环境。

npminstall-gember-cli

安装的前提是你的电脑已经安装好了npm，如果你还没安装过npm，那么你可以按照这个地址的教程安装npm，https://www.npmjs.cn/getting-started/installing-node/

也可以自定百度npm安装，非常简单。下载一个nodejs，然后配置环境变量就可以用了。

创建应用推荐你使用EmberCLI命令工具创建，只需要一个命令就可以创建一个完整的Ember应用，命令如下：

embernewape-note3

命令执行完毕之后会在执行命令的当前目录下创建一个名为apt-note3的目录，在国内运行都比较慢，创建项目过程会下载很多npm依赖，你可以修改系统的npm依赖库地址，比如改为淘宝的npm（https://developer.aliyun.com/mirror/NPM?from=tnpm），稍等几分钟之后会自动执行完成，如下是我本机的创建执行过程：

$embernewape-note3\ninstallingapp\nEmberCLIv3.18.0\n\n?CreatinganewEmberappin/Users/ubuntuvim/code/ape-note3:\ncreate.editorconfig\ncreate.ember-cli\ncreate.eslintignore\ncreate.eslintrc.js\ncreate.template-lintrc.js\ncreate.travis.yml\ncreate.watchmanconfig\ncreateREADME.md\ncreateapp/app.js\ncreateapp/components/.gitkeep\ncreateapp/controllers/.gitkeep\ncreateapp/helpers/.gitkeep\ncreateapp/index.html\ncreateapp/models/.gitkeep\ncreateapp/router.js\ncreateapp/routes/.gitkeep\ncreateapp/styles/app.css\ncreateapp/templates/application.hbs\ncreateconfig/environment.js\ncreateconfig/optional-features.json\ncreateconfig/targets.js\ncreateember-cli-build.js\ncreate.gitignore\ncreatepackage.json\ncreatepublic/robots.txt\ncreatetestem.js\ncreatetests/helpers/.gitkeep\ncreatetests/index.html\ncreatetests/integration/.gitkeep\ncreatetests/test-helper.js\ncreatetests/unit/.gitkeep\ncreatevendor/.gitkeep\n\nInstallingpackages...Thismighttakeacoupleofminutes.\nnpm:Installeddependencies\n\nInitializinggitrepository.\nGit:successfullyinitialized.\n\nSuccessfullycreatedprojectape-note3.\nGetstartedbytyping:\n\n$cdape-note3\n$npmstart\n\nHappycoding!\n

应用创建完毕之后，目录结构如下：

app目录是最重要的一个目录，后续所有项目程序都会放在对应的目录下面，public目录可以存放静态文件，比如图片，第三方CSS，第三方JavaScript文件等。config目录是项目的配置目录，通常是配置一下环境相关的东西。这些后续的文章都会讲到。暂时有个大概了解。然后进入的项目根目录，可以使用命令：cdape-note3，进入目录之后有两种方式可以启动项目。

第一种是npmstart，命令，第二种是embers，命令。推荐使用第二种方式。

第一次启动项目会稍微要一点时间。当你看到Buildsuccessful说明项目启动成功。如下是我本机的启动日志：

$embers\n\nBuildsuccessful(14977ms)–Servingonhttp://localhost:4200/\n\nSlowestNodes(totalTime>=5%)|Total(avg)\n----------------------------------------------------------------------+------------------\nBabel:@ember/test-helpers(2)|3342ms(1671ms)\nBabel:@ember-data/store(2)|2078ms(1039ms)\nPackage/assets/vendor.js(1)|1397ms\nBroccoliRollup(6)|1305ms(217ms)\nBabel:ember-inflector(1)|754ms

然后直接访问，http://localhost:4200/就可以进入项目的主页。看到如下截图，说明你的环境搭建成功，并且应用也启动成功。恭喜你可以继续进行后面的学习了。

打开app/templates/application.hbs。前面的3行代码是创建项目时默认生成的欢迎首页，你可以删除掉。

{{!--ThefollowingcomponentdisplaysEmber'sdefaultwelcomemessage.--}}\n<WelcomePage/>\n{{!--Feelfreetoremovethis!--}}

但是要注意{{outlet}}不能删除，这个是最顶层的占位符，所有子页面都会渲染到这个占位符上。我们修改一下application.hbs文件。加入一个h1标签。

<h1>PeopleTracker</h1>\n{{outlet}}

保存完之后项目会自动编译，并且自动刷新浏览器页面。切换到浏览器页面可以看到页面的欢迎信息已经没有了，取而代之的是刚刚加入的h1标签的内容。

Ember应用中定义一个路由也是非常简单的，直接通过EmberCLI工具就可以创建，仍然是在项目根目录下，执行如下命令即可创建一个路由。

embergenerateroutescientists\n或者简写成如下命令也可以。\nembergroutescientists

如下是我本机的执行过程：

$embergroutescientists\ninstallingroute\ncreateapp/routes/scientists.js\ncreateapp/templates/scientists.hbs\nupdatingrouter\naddroutescientists\ninstallingroute-test\ncreatetests/unit/routes/scientists-test.js

从执行的日志就可以看到，这个命令自动给我们创建了三个文件，一个是路由文件app/routes/scientists.js、一个是路由对应的页面文件app/templates/scientists.hbs（顺便说一句Ember框架使用handlebars作为页面的模板语言，更多有关handlebars可以访问https://handlebarsjs.com/），另外一个是路由对应的测试文件tests/unit/routes/scientists-test.js。更新了一个文件app/router.js.同时，会在文件里面生成固定类定义代码，

//app/routes/scientists.js\nimportRoutefrom'@ember/routing/route';\nexportdefaultclassScientistsRouteextendsRoute{\n}

//app/router.js\nRouter.map(function(){\nthis.route('scientists');//自动生成的和路由文件同名的路由名称\n});

//app/templates/scientists.hbs\n{{outlet}}

最后一个是路由对应的单元测试代码：

//tests/unit/routes/scientists-test.js\nimport{module,test}from'qunit';\nimport{setupTest}from'ember-qunit';\n\nmodule('Unit|Route|scientists',function(hooks){\nsetupTest(hooks);\n\ntest('itexists',function(assert){\nletroute=this.owner.lookup('route:scientists');\nassert.ok(route);\n});\n});

下面开始做一下有意思的事情，在刚刚创建好的app/templates/scientists.hbs文件中添加一些HTML内容。

<h2>ListofScientists</h2>

等项目自动编译完成，访问http://localhost:4200/scientists

可以看到刚刚添加h2标签的内容，展示在首页application.hbs中h1标签的下面。这是为什么呢？？前面我有提到，不能删除application.hbs文件的里面的{{outlet}}，子页面的内容都会渲染到这个占位符所在位置。你可以调整它的位置，我们把application.hbs文件的里面的{{outlet}}放在h1标签的前面看看是什么效果。可以看到“ListofScientists”是不是展示在h1标签PeopleTracker的前面了。

继续往下，我们在路由里面添加几个数据。在路由的model()方法里面，直接返回的一个人们列表。

//app/routes/scientists.js\nimportRoutefrom'@ember/routing/route';\n\nexportdefaultclassScientistsRouteextendsRoute{\nmodel(){\nreturn['MarieCurie','MaeJemison','AlbertHofmann','张三','ubuntuvim','xcoding.tech','李四'];\n}\n}

代码也非常简单，就是一个JavaScript数组，这个数组定义了7个字符串。在model()方法中返回的数据可以在路由同名的Hbs模板中遍历出来。当然你也可以在model()方法里调用其他服务器API接口，动态获取数据，后续的文章会讲到怎么动态获取后端的数据。修改路由同名的scientists.hbs，在模板中遍历路由返回的数组。

//app/templates/scientists.hbs\n\n<h2>ListofScientists</h2>\n\n<ul>\n{{!ember遍历语法，数组的遍历用#each标签，item是一个别名，就是数组的元素，这个和其他语言的for循环类似}}\n{{#each@modelas|item|}}\n{{!直接把数组的每个元素展示在页面上}}\n<li>{{item}}</li>\n{{/each}}\n</ul>

修改完毕之后，稍等几秒钟，项目自动刷新完毕后，可以在刚刚的页面上看到数组的每个元素内容。{{#each}}……{{/each}}是Ember提供的数据遍历标签，整个标签的遍历意思是：从回调方法model()中获取数据，并遍历每个元素。<ul>和<li>是普通的HTML标签。

在一个Ember应用中，一段HTML标签如果有多个地方使用，你可以定义成组件，一个组件可以在多个地方调用，并且可以往这个组件里面传递数据。创建组件也是非常简单，也是在项目根目录下通过EmberCLI命令创建。

embergcomponentPeopleList\n或者\nembergcomponentPeopleList

如下是我本机的执行日志：

$embergcomponentpeople-list\ninstallingcomponent\ncreateapp/components/people-list.hbs\nskipapp/components/people-list.js\ntiptoaddaclass,run`embergeneratecomponent-classpeople-list`\ninstallingcomponent-test\ncreatetests/integration/components/people-list-test.js

命令执行完之后，会自动为我们创建一个app/components/people-list.hbs文件，和一个对应的测试文件tests/integration/components/people-list-test.js。得到组件文件之后，我们开始做一些改造，把刚刚展示的名字列表改造成一个公用的组件。首先把scientists.hbs的内容复制到people-list.hbs。然后使用参数替换掉里面的静态内容。

//app/components/people-list.hbs\n\n{{!<h2>ListofScientists</h2>改为用参数获取的方式}}\n<h2>{{@title}}</h2>\n\n<ul>\n{{!同样是数据的遍历，不过是改成遍历person参数}}\n{{#each@personas|item|}}\n{{!直接把数组的每个元素展示在页面上}}\n<li>{{item}}</li>\n{{/each}}\n</ul>

{{@title}}是Ember提供的语法，作用是获取参数title的值。其实就是一个get操作，作用和get('title')是一样的。仅仅是修改组件还是不够的，此时组件的参数都是空的。并且还没有任何地方调用到这个组件。下面继续修改的scientists.hbs的内容。

<!--\n<h2>ListofScientists</h2>\n\n<ul>\n{{#each@modelas|item|}}\n<li>{{item}}</li>\n{{/each}}\n</ul>\n-->\n\n{{!组件的名称就是创建时驼峰的命名，一定要按照大写单词的规范，不然无法识别}}\n<PeopleList@title="ListofScientists"@person={{@model}}/>

修改完成之后，等等页面刷新，可以看到和之前一样的效果。需要注意的是模板文件的命名规范是用中划线分隔单词，组件的命名规范是大写字母分隔。这点非常重要，这个是Ember约定好的。如果还有其他页面需要展示用户类别，那么你只需要在展示的地方再调用一次即可。

<PeopleList@title="ListofScientists"@person={{@model}}/>增加交互

接下来我们添加一个交互按钮，给每个名字增加一个鼠标点击事件。修改PeopleList组件。

//app/components/people-list.hbs\n{{!<h2>ListofScientists</h2>改为用参数获取的方式}}\n<h2>{{@title}}</h2>\n\n<ul>\n{{!同样是数据的遍历，不过是改成遍历person参数}}\n{{#each@personas|item|}}\n{{!直接把数组的每个元素展示在页面上}}\n<li>\n<buttontype="button">{{item}}</button>\n</li>\n{{/each}}\n</ul>

因为还没添加任何CSS样式所以看起来比较丑，先不着急。后面我们一步步美化它。目前的按钮还是一个静态的按钮，点击它是没有任何反应的。下面给每个按钮添加一些响应行为。比如点击对应的名字是弹出一个alert对话框。通过EmberCLI创建一个组件对应处理类。

embergcomponent-classPeopleList

如下是我本机的执行日志：

$embergcomponent-classPeopleList\ninstallingcomponent-class\nidenticalapp/components/people-list.js

命令执行完毕之后，自动创建了一个组件类app/components/people-list.js。同时也会自动在类里面导入依赖以及定义类名称。

//app/components/people-list.js\nimportComponentfrom'@glimmer/component';\n\nexportdefaultclassPeopleListComponentextendsComponent{\n}\n

紧接着，在这个组件类中添加一些事件响应的代码。代码也非常简答就是获取鼠标点击的人名并且通过alert对话框弹出来。

//app/components/people-list.js\nimportComponentfrom'@glimmer/component';\nimport{action}from'@ember/object';\n\nexportdefaultclassPeopleListComponentextendsComponent{\n//声明一个动作\n@action\nshowPerson(person){//自定义函数\nalert(`Theperson'snameis${person}!`);\n}\n}

在代码中多导入了一个@ember/object，然后定义了一个方法showPerson，并且传入一个参数person。另外一个非常重要的点就是@action声明，这个声明表示你可以在组件中直接调用这个方法。那么怎么调用呢？？继续修改的组件的模板。

{{!<h2>ListofScientists</h2>改为用参数获取的方式}}\n<h2>{{@title}}</h2>\n\n<ul>\n{{!同样是数据的遍历，不多改成遍历person参数}}\n{{#each@personas|item|}}\n{{!直接把数组的每个元素展示在页面上}}\n<li>\n<!--<buttontype="button">{{item}}</button>-->\n<buttontype="button"{{on'click'(fnthis.showPersonitem)}}>{{item}}</button>\n</li>\n{{/each}}\n</ul>

同on关键字定义了一个鼠标单击（click）事件，事件的处理方法就是showPerson，但是要在事件前面加上fn关键字。方法的参数放在事件后面。这个是Ember规定的写法。你可以传递多个参数，也是放在事件后面用空格隔开即可。

等待页面自动刷新，任意单击一个按钮，可以看到弹出一个对话框，上面显示了你点击的人名。

通过前面的步骤，我们已经创建了一个简单的Ember应用。紧接着，如果我要把这个应用发布到生产环境要如何处理呢？现在我们运行项目是以开发模式启动的生产环境不可能直接编译然后运行的。生产环境通常是一个打包压缩后的可直接运行的代码包。通过如下EmberCLI命令就可以打包你的项目。同样的，进入项目根目录下。执行命令，在执行命令之前先修改一个配置项。

修改config/environment.js里面的locationType配置项的值为hash。

简单讲这个配置项是和访问路径有关系，改为hash之后，子路由的方位会在URL上增加一个#（http://localhost:8080/#/scientists），如果不修改这个配置发布到服务器上之后，你直接访问http://localhost:8080/scientists会报404，或者是你直接刷新浏览器也会报404。具体原因后面文章会介绍，先稍安勿躁。

emberbuild--environment=production

如下是我本机的执行日志

$emberbuild--environment=production\nWARNING:Option"nodeWorker"isdeprecatedsinceworkerpool@5.0.0.Pleaseuse"workerType"instead.\nEnvironment:production\ncleaningup...\nBuiltprojectsuccessfully.Storedin"dist/".\nFilesizes:\n-dist/assets/ape-note3-5a9b3111306347132d678c1dd8c0c579.js:16.03KB(3.28KBgzipped)\n-dist/assets/ape-note3-d41d8cd98f00b204e9800998ecf8427e.css:0B\n-dist/assets/vendor-22a2fcdfadef4da4c7814c4712deef7a.js:693.72KB(176.65KBgzipped)\n-dist/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css:0B

打包完成之后，在项目根目录下有一个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应用发布上去，道理是一样的。我只是用本机的服务器演示。

关于start up是什么意思、读音和快速开始（quick start）的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。