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. themeforest 免费模板

    http://www.im286.com/thread-9550365-1-1.html 官网:http://themeforest.net/item/elena-responsive-email-t ...

  2. CodeForces 1098D. Eels

    题目简述:对一个非空正整数(可重)集合$S$,从中选出两个元素$a, b (a \leq b)$,将他们从$S$中删除并将$a+b$加入$S$,重复这个操作直到$S$中只剩下一个元素为止,称为一次[竞 ...

  3. B. One Bomb (#363 Div.2)

    B. One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  4. Eclipse中实现JS代码提示功能

    转发: 用Eclipse写js代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键 ...

  5. HDU - 1232 畅通工程-并查集模板

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可). ...

  6. eclipse neon 离线安装插件

    我的eclipse版本是4.6.3,以安装svn插件为例. 网上查到很多资料都是说找到eclipse目录下"plugins"和"features"文件夹,将下载 ...

  7. Spring Boot 学习系列(04)—分而治之,多module打包

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 明确功能,各司其职 在一个结构清晰的项目中,一个没有module划分的结构显然不是最佳实践.有人会说可以在同 ...

  8. 常用的高级sql查询

    1.根据主键id数组批量修改 void updateByIdArr(Integer[] idArr); <update id="updateByIdArr" paramete ...

  9. PHP实现用户登录页面

    PHP学习日常,放在上面记录一下咯 我用了bootstrap框架,这样的界面要好看一点 登录页面: 必须用户名.密码.验证码都输入正确才能登录成功喔,否则出现下面提示 登陆成功之后,登录和注册选项切换 ...

  10. perl C/C++ 扩展(四)

    在前面三篇博客中,我们了解到如何使用c/c++ 扩展自己的perl 库,但是博主在学习过程中,对动态库或静态库的加载不是十分了解,后来自己又细挖一下.后来就有了这篇博文,再后来,没有再后来了,囧!! ...