Windows 下 Ember 应用开发环境搭建

发布于 2020-03-03 18:09:21 字数 3210 浏览 1285 评论 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文件进行合并和压缩。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。