Windows 下 Ember 应用开发环境搭建 - 文章教程

Windows 下 Ember 应用开发环境搭建

发布于 2020-03-03 字数 3481 浏览 1218 评论 0

环境:windows 7

安装nodejs

安装grunt

安装 grunt 命令行工具 grunt-cli

执行全局安装

# grunt 必须依赖
npm install -g grunt-cli
# 生成项目脚手架 grunt-init --help
npm install -g grunt-init

安装 Yeoman

Yeoman 是 yo + bower + grunt

  • yo: 生成 项目脚手架
  • bower: 包管理工具
npm install -g yo

自动安装grunt 和 bower

# 生成项目脚手架
npm install -g generator-webapp

准备项目文件夹

创建项目文件夹

安装grunt及插件,安装在项目根目录

进入项目根目录

npm install grunt --save-dev
npm install grunt-contrib-qunit --save-dev

验证版本 grunt -version

grunt-cli v0.1.9
grunt v0.4.1

创建一个项目脚手架代码

yo wabapp

查看目录下的文件,自动生成 package.json 和 Gruntfile

安装依赖的模块

npm install

运行

grunt server --force

http://localhost:9000 出现欢迎页面

与ember集成

下载ember相关包

bower install ember

app 目录下自动生成 bower_components

安装模版编译插件

npm install grunt-ember-templates --save-dev

建立模版文件夹 templates

mkdir app/templates

修改Gruntfile.js 自动编译模版

在Gruntfile.js文件添加

grunt.loadNpmTasks('grunt-ember-templates');

在grunt.initConfig内添加

emberTemplates: {
  compile: {
    options: {
      templateName: function(sourceFile) {
        return sourceFile.replace(/app\/templates\//, '');
      }
    },
    files: {
      "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app%>/templates/**/*.handlebars"]
    }
  }
},

在 watch处添加如下内容:

emberTemplates: {
    files: '<%= yeoman.app %>/templates/**/*.handlebars',
    tasks: ['emberTemplates']
},

最后添加emberTemplates到server任务

grunt.registerTask('server', function (target) {
    ...
    grunt.task.run([
        ...
        'compass:server',
        ' emberTemplates', // Add this line.
        'livereload-start',
        ...
    ]);
});

开发一个简单应用

在app/scripts/main.js 中 添加如下代码

App = Em.Application.create({
  rootElement: $('#app'),
});

App.Router.map(function(){
  this.route('about');
});

在 index.html

 <div id="app" class="container">   
 </div>

添加js文件

  <script src="bower_components/jquery/jquery.js"></script>       
  <script src="bower_components/handlebars/handlebars.js"></script>
  <script src="bower_components/ember/ember.js"></script>

  <script src="scripts/main.js"></script>
  <script src="scripts/templates.js"></script>

建立模版

在 app/templates目录下建立模版文件

  • application.handlebars
<h1>My App</h1>
{{outlet}}
  • index.handlebars
<h1>My App</h1>
<h1>index</h1>
{{#linkTo "about"}}About{{/linkTo}}
  • about.handlebars
<h1>About</h1>
{{#linkTo "index"}}index{{/linkTo}}

运行

grunt server --force

http://localhost:9000 出现欢迎页面,内容如下:

My App
index
About

下一步,修改 grunt Gruntfile.js

对components、controllers、models、routes、views等js文件进行合并和压缩。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0