1.安装yeoman

在安装nodeJs的基础上,输入命令:npm install -g yo grunt-cli bower,安装yeoman,grunt,bowerify

安装完成后,输入命令:yo --version,查看当前yeoman的版本号

yeoman官网地址:http://yeoman.io/

2.去http://yeoman.io/查看generator,安装generator

输入命令:npm install -g generator-react-webpack

3.安装generator完后,输入命令:npm ls -g depth=1 2>/dev/null | grep generator,查看webpack、react等的版本号

在windows系统下会报错,【grep是Linux里面的命令,因此需要linux环境,windows可以用Git bash,gitbash里有MinGW,可以执行执行一些linux命令】

参考文档:http://blog.csdn.net/esther_heesch/article/details/52972767

安装git的方法:http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

git bash运行的结果:

4.安装完git后,注册github账号,将github上新建的仓库导到本地来

使用git bash命令工具,在你将要导出项目的文件夹内,右键Git Bash Here打开命令工具

输入命令:git clone 新建仓库的地址

运行完命令后,就可以看到在导出项目文件夹内多出了以github上仓库名命名的项目文件夹

5.在命令行中输入命令:cd gallery-by-react,进入gallery-by-react文件夹

输入命令:yo react-webpack gallery-by-react,根据提示生成项目所需

运行完后的目录:

6.运行完后发现缺少Gruntfile.js,这是由于generator-react-webpack V2.0 移除了Grunt(webpack替代)。可以执行 npm start 或者npm run serve 启动服务

然后在网址上输入http://localhost:8000/webpack-dev-server/,即可访问

React学习实例总结,包含yeoman安装、webpack构建的更多相关文章

  1. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  2. React 入门实例

    React 入门实例教程 一.安装 React 的安装包,可以到官网下载. $ git clone git@github.com:ruanyf/react-demos.git 如果你没安装 git, ...

  3. 由React学习到Yeoman安装以及遇到的问题

    离职闲下来之后想着学一些新知识,本来是想从react入手,结果延伸出去的内容就像一棵树的树枝,不断增加. 学习计划是从这里开始的(6周学习计划,攻克javascript难关 https://zhuan ...

  4. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  5. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  6. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  7. webpack学习(一)起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  8. webpack学习(一)项目中安装webpack

    如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令: npm init 因为已经安装好 ...

  9. React基本实例

    学习React不是一蹴而就的事情,入门似乎也没那么简单.但一切都是值得的. 今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程.认真完成这个实例 ...

随机推荐

  1. 回味经典——uboot1.1.6 之 第二阶段 第三阶段

    转自:http://blog.csdn.net/lizuobin2/article/details/52061530 上篇文章说到,再清 BSS 段之后,CPU 跳转到 sdram 里的 start_ ...

  2. HDU-2553

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. 总结open与fopen的区别

    https://www.zybuluo.com/yiltoncent/note/87461 参考链接1 参考链接2 对于这两个名字很类似的函数,对于很多初学者来说,不容易搞清楚它们有什么不同,只知道按 ...

  4. 纯css单选框

    1.没有用bootstrap时: .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50 ...

  5. HDU4973 【几何。】

    题意: 给你一个以原点为圆心的两个圆,一个大圆,一个小圆,然后给你一个硬币和他的速度,问你经过大圆的时间: 思路: 直接杠.. 然后wa的怀疑人生,后面wa在了速度的方向,如果我说一个点在两个圆的左上 ...

  6. Mol Cell Proteomics. |王欣然| 基于微粒的蛋白聚合物捕获技术让能满足多种不同需求的蛋白质组学样品制备方法成为可能

    大家好,本周分享的是发表在Molecular & Cellular Proteomics. 上的一篇关于蛋白质组学样本质谱分析前处理方法改进的文章,题目是Protein aggregation ...

  7. css定位-position

    前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...

  8. 慕课笔记-Java入门第二季

    1.java对象的使用 (1)创建对象 类名 对象名=new 类名(); (2)使用对象 引用对象的属性:对象名.属性; 引用对象的方法:对象名.方法(); Note: ①Java会给成员变量赋初始值 ...

  9. ADO学途 four day 数据库左右连接

    数据库的多表操作 数据库用于存放用户数据,用户数据库的数据又会有不同表来存放不同类型的数据,这这是就会产生多 张表来满足需求.列如,部门表有市场部,技术部,行政部等.,子表就有员工具体信息表用来存放员 ...

  10. 单片机的C语言中位操作用法2

    单片机的C语言中位操作用法 在对单处机进行编程的过程中,对位的操作是经常遇到的.C51对位的操控能力是非常强大 的.从这一点上,就可以看出C不光具有高级语言的灵活性,又有低级语言贴近硬件的特点. 这也 ...