使用 yeoman 构建项目之前,你需要安装这两个环境:node,ruby。

为什么需要使用node?因为我们需要使用grunt自动化工具,而grunt工具则是依赖node。

为什么需要使用ruby?我开发项目很可能需要用到sass或者compass等,而这两个工具则是依赖ruby。

yeoman依赖工具:bower,grunt

在使用 yeoman 前,我们需要确保 bower 和 grunt 已经安装好了。

另需要注意,不同版本的 yeoman 依赖的 node,npm的版本需求也是不一样的。

现在,准备工作都好了,我们开始我们的项目:

1、安装 yeoman

$ npm install -g yo

  如果你是 mac 用户,则需要使用 sudo(超级用户权限)运行该命令 。

2、查看需要的工具是否都安装好了

$ yo --version && bower --version && grunt --version

  运行该命令我们会看到如下四条输出:

1.4.6
1.4.1
grunt-cli v0.1.13
grunt v0.4.5

  分别输出他们版本。

3、安装生成器

$ npm install -g generator-angular

  这里我们创建一个基于angularjs的生成器。也可以安装某一个版本的生成器:

$ npm install -g generator-angular@0.7.1

4、使用生成器搭建应用

$ yo angular

  接着,generator-angular会询问你需不需要使用Sass和/或者Bootstrap,使用’n'和’y'进行选择。

然后你需要选择你需要使用的Angular模块。Angular模块是一些带有特定功能的独立的JS文件。举个例子,ngResource模块(angular-resource.js)提供了RESTful服务。你可以使用空格键来取消项目。

5、运行项目

$ grunt serve

  运行命令后本地会启动一个基于Node的http服务。通过浏览器访问http://localhost:9000就可以看到你的应用了。

yeoman开始项目的更多相关文章

  1. 前端项目构建之yeoman

    各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发 ...

  2. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

  3. yeoman(转)

    前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世, ...

  4. Grunt一辈子的好基友:yeoman

    yeoman是什么 yeoman主要包含了三个工具:yo.grunt.bower.我们先看下这三个工具分别是做什么的: yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像). gr ...

  5. yeoman运行grunt serve 提示错误

    今天在使用 yeoman 的时候,当我运行 grunt serve 命令的时候,出现如下提示: 1.Error: Cannot find module 'load-grunt-tasks' $ gru ...

  6. Yeoman安装

    Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化. Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该ge ...

  7. Yeoman安装和使用详解

    Yeoman generator-react-webpack 一 什么是Yeoman Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化. Yeoman提供generator系统,一个 ...

  8. 基于Yeoman实现自定义脚手架

    什么是脚手架? Yeoman是什么? 实现自定义脚手架 基于Yeoman实现Vue-cli 一.什么是脚手架? 手脚架从功能上来讲就是创建项目初始文件,这其中包括生成功能模块配置.自动安装依赖.自动生 ...

  9. ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序

    原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith ...

随机推荐

  1. Google Code Jam 2015 Round1A 题解

    快一年没有做题了, 今天跟了一下 GCJ Round 1A的题目, 感觉难度偏简单了, 很快搞定了第一题, 第二题二分稍微考了一下, 还剩下一个多小时, 没仔细想第三题, 以为 前两个题目差不多可以晋 ...

  2. Notes of the scrum meeting(2013/10/20)

    软工项目组buaa_smile确定自由项目主题及实现功能的scrum meeting meeting time:7:30~9:00p.m.,October 20th,2013 meeting plac ...

  3. 面试中问到SpringMVC与struts的区别

    1.先简单的介绍一下SpringMVC 废话不多说,其实SpringMVC就是一个MVC的框架,SpringMVC它的annotation式的开发比struts 开发的方便很多,可以直接代替strut ...

  4. 微信wap开发,页面显示元素不全-微信开发(asp.net)

    最近在开发的微信的微商城,出现这样一种情况: pc上浏览正常,但是一到手机上浏览就会缺少部分元素 解决办法: 找了很多原因,还通过uc浏览器把网页到存下来了,发现并没有缺少元素,只是没有显示出来,后来 ...

  5. [原创] zabbix学习之旅七:如何远程操作被监控机器

    虽然我们已经创建了一个报警系统,但在实际场景中,运维人员从得到报警到实际解决问题有一定的时差,若业务系统没有做高可用,那业务不得不中断,对于某些要求严格的企业级环境,这是不可容忍的,那有没有方法能让z ...

  6. [algothrim]URL相似度计算的思考

    http://www.spongeliu.com/399.html http://in.sdo.com/?p=865

  7. 2433: [Noi2011]智能车比赛 - BZOJ

    Description 新一届智能车大赛在JL大学开始啦!比赛赛道可以看作是由n个矩形区域拼接而成(如下图所示),每个矩形的边都平行于坐标轴,第i个矩形区域的左下角和右上角坐标分别为(xi,1,yi, ...

  8. ELF

    http://www.360doc.com/content/11/0826/13/7588214_143424472.shtml 链接,装载都是基于数据结构ELF.

  9. 【BZOJ】【3757】苹果树

    树分块 orz HZWER http://hzwer.com/5259.html 不知为何我原本写的倍增求LCA给WA了……学习了HZWER的倍增新姿势- 树上分块的转移看vfk博客的讲解吧……(其实 ...

  10. Leetcode#80 Remove Duplicates from Sorted Array II

    原题地址 简单模拟题. 从先向后遍历,如果重复出现2次以上,就不移动,否则移动到前面去 代码: int removeDuplicates(int A[], int n) { ) return n; ; ...