唯品秀博客
首页 > 别具匠心 > 使用yeoman快速搭建基于webpack的React项目

使用yeoman快速搭建基于webpack的React项目

2017年12月21日 唯品秀 3063次浏览

什么是Yeoman?

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

1.安装yeoman

1
npm install -g yo

安装react-webpack

在:http://yeoman.io/generators/ 页面搜索react,可以获得最新的react相关的基础框架。本文以 react-webpack为示例。react-webpack 在github里的地址,https://github.com/react-webpack-generators/generator-react-webpack,在终端输入命令行:

1
npm install -g generator-react-webpack

构建你的项目

在项目路径下使用命令行:

1
yo react-webpack gallerty-by-react

这是一句yeoman命令,意思是 使用名为 react-webpack 的框架构建你的 gallerty-by-react项目

我的项目中会用到sass,所以输入命令来安装:

npm install sass-loader node-sass webpack --save-dev

运行项目

1
npm run start

在浏览器输入http://localhost:8000就能看到运行起来的网站了。

温馨提示:如果电脑开启了酷狗音乐播放器,那么运行npm run start是会报错的,因为8000端口被占用

最后在chrome应用商店添加react的调试小程序。地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi,这样你的项目基础框架就构建好了。可以准备开始react的开发了。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 2 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 使用yeoman快速搭建基于webpack的React项目

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 190 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 874 条
  • 链接总数: 13 个
  • 标签总数: 371 个
  • 建站时间: 886 天
  • 注册用户: 690 人
  • 访问总量: 8673162 次
  • 最近更新: 2019年5月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线