文档章节

React学习实例总结,包含yeoman安装、webpack构建

yizhichao
 yizhichao
发布于 2017/07/10 09:07
字数 390
阅读 15
收藏 1

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/,即可访问

© 著作权归作者所有

yizhichao

yizhichao

粉丝 16
博文 465
码字总数 362836
作品 0
南京
程序员
私信 提问
通过yeoman创建React-webpack项目

说明 通过yo创建React项目, 并且学习React和Redux *** 环境要求 环境要求 node js环境 ,请安装最新node js 版本 打开cmd(win下)或者终端(mac & linux)执行npm -v 后可以看到显示版本号, 以后...

IT_小翼
2016/06/28
1K
0
Yeoman-- 一个强大的前端构建工具

原文还是在简书上: Yeoman-- 一个强大的前端构建工具,我只是自己的搬运工!! 上期跟大家试了试Vue-cli这个构建工具,这个让我想起了很多其他的前端工具,其中一个就是Yeoman(上次就剧透了...

乖小鬼YQ
2017/11/29
0
0
【译】如何从头开始搭建React,Webpack4,Babel7工程

这是一篇非常适合新手的教程。 目录: 你将会学习到的知识 建立项目 配置webpack 配置Babel 编写React组件 HTML webpack plugin webpack dev server 总结 你将会学习到的知识 如何安装及配置...

EniviaQ
02/12
0
0
从零开始React项目架构(六)

前言 相信很多人都用过或者类似的脚手架来快速构建项目,那我们能不能把咱们的项目做成脚手架呢?当然可以 Yeoman Yeoman是一个强健的工具,库,及工作流程的组合,帮你网页开发者快速创建出...

ZeroNoob
2018/06/25
0
0
ReactJS webpack 报错 [WDS] Disconnected!

  在慕课网学习ReactJS时,由于老师的教程比较早,现有的yeoman的generator-react-webpack框架构建出来之后,发现框架已经移除了grunt,只用了webpack来进行打包,版本是Version: webpack ...

OriginLeon
2016/12/15
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部