Yeoman安装和使用详解

摘要:
Yeoman提供了负责开始项目开发的一切,没有任何让人头痛的手动配置。采用模块化结构,Yeoman利用从几个开源社区网站学习到的成功和教训,以确保栈开发人员越来越智能的进行开发。基于良好的文档基础以及深思熟虑的项目构建过程,Yeoman提供测试和其他更多技术,因此开发人员可以更专注于解决方案而不用去担心其他小事。Yeoman自动构建项目时会用到该软件,所以我们先安装好。
一 什么是Yeoman

Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化。

Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命令时,会运行该generator。通过这些官方的Generators,推出了Yeoman工作流,工作流是一个健壮、有自己特色的客户端堆栈,包含能快速构建漂亮的网络应用的工具和框架。Yeoman提供了负责开始项目开发的一切,没有任何让人头痛的手动配置。

采用模块化结构,Yeoman利用从几个开源社区网站学习到的成功和教训,以确保栈开发人员越来越智能的进行开发。基于良好的文档基础以及深思熟虑的项目构建过程,Yeoman提供测试和其他更多技术 ,因此开发人员可以更专注于解决方案而不用去担心其他小事。

Yeoman主要提供了三个工具:脚手架(yo),构建工具(grunt),包管理器(bower)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们更高效的工作流模式。

二 Yeoman安装步骤

系统环境:win8

1.Node.js安装

到Node.js官方网址下载Node.js

安装后验证是否安装成功:进入命令提示符,输入node --verison命令

Yeoman安装和使用详解第1张

安装Node.js,会自动安装npm,验证npm是否安装成功:同样在命令提示符中输入npm --version

Yeoman安装和使用详解第2张

2.安装git

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Yeoman自动构建项目时会用到该软件,所以我们先安装好。到Git官网上下载并安装

Yeoman安装和使用详解第3张选择第二项

3.安装Yeoman

在命令提示符中运行npminstall-gyogrunt-clibower

经过几屏的安装信息滚动,最后你会看到安装成功提示:

Yeoman安装和使用详解第4张

4.安装generator

在命令提示符中输入yo命令

Yeoman安装和使用详解第5张

用上下键选择install a generator,我们选择安装webappgenerator,输入webapp,选择webapp

Yeoman安装和使用详解第6张

接下来我们使用yeoman创建项目

5.Yeoman使用

创建一个工作目录,用于存放Yeoman项目。我在D盘下新建AngularJs的webapp工作目录,终端进入,输入yo命令,用上下键选择webapp

Yeoman安装和使用详解第7张

这里我们不选择Sass,因为需要Sass的话运行环境是Ruby,在windows下配置会非常麻烦;选择bootstrap;不选择Modernizr;点击回车,经过几屏的信息滚动后,会提示项目构建完成,文件目录如下:

Yeoman安装和使用详解第8张

app文件夹内目录:

Yeoman安装和使用详解第9张

6.在浏览器中预览

在命令提示符中输入:grunt server

Yeoman安装和使用详解第10张

启动成功

Yeoman安装和使用详解第11张

如果启动过程中,服务器报错,可以使用强制启动,命令为grunt server -force

服务器启动后,浏览器会自动打开并访问:http://localhost:9000/,如下图所示:

Yeoman安装和使用详解第12张

至此,Yeoman安装和使用讲解完毕

免责声明:文章转载自《Yeoman安装和使用详解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue中在echarts tooltip中添加点击事件Vue-router(基础)_滚动行为和history模式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件。。。 1.gulp-less:用于把less文件编译成css文件。      因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件。除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译。   在...

vs2017添加引用报错

使用vs2017开发工具打开项目,添加应用的时候报错,提示对com组件的调用返回了错误信息,不能引用程序集; 解决办法: 1.打开VS 2017的开发人员命令提示符 工具 2.定位到vs的安装目录: cd  C:Program Files (x86)Microsoft Visual Studio2017CommunityCommon7IDEPublicAs...

AngularJS从构建项目开始

AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地...

Windows下批处理文件(.bat)的使用

cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建、编辑和查看。两者所用的命令行代码也是共用的,只是cmd文件中允许使用的命令要比bat文件多。cmd文件只有在windows2000以上的系统中才能运行,而bat文件则没有这个限制。从它们的文件描述中也可以看出以上的区别:cmd文件的描述是“windows nt命...

电脑运行msi安装包提示the error code is 2503/2502如何解决

当在电脑中运行msi安装包时,出现the error code is 2503或者2502错误提示,其实是由于没有运行的权限导致的,但是又不能右击以管理员身份运行,那么应该如何操作呢?对于这样的问题,我们可以参考以下方法进行解决。 1、按Win+X选择“命令提示符(管理员)”,或者右击命令提示符选择以管理员身份运行; 2、记住安装包的保存路径,尽量不要...

在W10系统中配置Java环境变量后,cmd命令提示符找不到java

java环境变量配置在W10系统上和以前有所区别,可能是W10版本导致也可能是W10一开始就出问题。 问题的表现就是你在环境变量里已经配置完JAVA_HOME,CLASSPATH,path之后在控制台输入java或者javac或者java -version 提示:“”不是内部或者外部命令,也不是可运行程序或批处理文件“” ,问题出在W10系统path变量配...