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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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构建 的全部内容， 来源链接： utcz.com/z/381425.html

回到顶部