Yeoman

generator-react-webpack

一 什么是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命令

  

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

  

  2.安装git

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

  选择第二项

  3.安装Yeoman

  在命令提示符中运行npm install -g yo grunt-cli bower

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

  

  4.安装generator

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

  

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

  

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

  5.Yeoman使用

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

  

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

  

  app文件夹内目录:

  

  6.在浏览器中预览

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

  

  启动成功

  

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

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

  

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

Yeoman安装和使用详解的更多相关文章

  1. libCURL开源库在VS2010环境下编译安装,配置详解

    libCURL开源库在VS2010环境下编译安装,配置详解 转自:http://my.oschina.net/u/1420791/blog/198247 http://blog.csdn.net/su ...

  2. zookeeper的安装(图文详解。。。来点击哦!)

    zookeeper的安装(图文详解...来点击哦!) 一.服务器的配置 三台服务器: 192.168.83.133   sunshine 192.168.83.134   sunshineMin 19 ...

  3. 转AjaxControlToolkit的安装与使用详解

    AjaxControlToolkit的安装与使用详解 AjaxControlToolkit下载http://ajax.asp.net/downloads/default.aspx?tabid=47ht ...

  4. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  5. Mac下安装HBase及详解

    Mac下安装HBase及详解 1. 千篇一律的HBase简介 HBase是Hadoop的数据库, 而Hive数据库的管理工具, HBase具有分布式, 可扩展及面向列存储的特点(基于谷歌BigTabl ...

  6. Ubuntu下安装JDK图文详解

    很详细的在Ubuntu中安装JDK图文详解教程,我们选择的是jdk1.6.0_30版本.安装文件名为jdk-6u30-linux-i586.bin. 1.复制jdk到安装目录 (1)假设jdk安装文件 ...

  7. CentOS7/RHEL7安装Redis步骤详解

    CentOS7/RHEL7安装Redis步骤详解 CentOS7/RHEL7安装Redis还是头一次测试安装了,因为centos7升级之后与centos6有比较大的区别了,下面我们就一起来看看Cent ...

  8. RedHat 7.1 下安装 Zabbix监控程序详解(适合linux初级用户)

    RedHat 7.1 安装 Zabbix 监控程序详解(适合对linux初级用户)2017-05-02 安装步骤: 1.zabbix需要安装LAMP架构 2.安装zabbix服务 3.初始化zabbi ...

  9. Vmware12安装centos系统详解

    vmware12安装centos7系统详解 用虚拟机12安装centos7系统详细安装过程,后附centos7下载地址. 工具/原料 虚拟机12 centos7系统镜像 方法/步骤 1 1.百度搜索c ...

随机推荐

  1. html与css关系

    1.html是网页的内容的载体 内容是作者发在页面想让用户浏览的信息,包括文字,图片,视频等 2.css样式是表现 像网页的外衣,比如标题字体的变化,颜色的变化,背景颜色,边框等,所有这些都是用来改变 ...

  2. snort帮助文档

    [1] CentOS6.6下基于snort+barnyard2+base的入侵检测系统的搭建 2 基于Snort的C_S模式的IDS的设计与应用_王会霞.caj [3] Snort 笔记1 - 3种模 ...

  3. 如何为linux系统设置全局的默认网络代理

    方法1:更改全局配置文件/etc/profile all_proxy="all_proxy=socks://proxy.xxx.com.cn:80/" ftp_proxy=&quo ...

  4. Selenium+PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...

  5. $(QTDIR);$(QTDIR)\include\QtCore;$(QTDIR)\include;

    $(QTDIR); 在系统环境变量中定义即可  vs属性中设置头文件路径

  6. PHP 过滤特殊符号

    function strFilter($str){ $str = str_replace('`', '', $str); $str = str_replace('·', '', $str); $str ...

  7. 52ABP视频学习

    https://study.163.com/course/courseMain.htm?courseId=1005208064 网易视频 https://www.52abp.com/ReadWiki/ ...

  8. JDK8集合类源码解析 - HashSet

    HashSet 特点:不允许放入重复元素 查看源码,发现HashSet是基于HashMap来实现的,对HashMap做了一次“封装”. private transient HashMap<E,O ...

  9. easyui validate -- radio、checkbox 校验扩展,事件域名

    事件域名: $(dom).on('click.myNameSpace',function(){ ... }),其中‘.myNameSpace’便是域名: 目前作用:$(dom).off('click. ...

  10. SWE_Browser编译

    QRD从android4.4开始使用SWE_Browser,android原始代码中不再提供Browser.最近在做一个QRD8916_113517 CMCC入库版本,需要使用SWE_Browser. ...