唯品秀前端博客
当前位置: 别具匠心 > 使用yeoman快速搭建基于webpack的React项目

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

2017-12-21 分类:别具匠心 作者:管理员 阅读(3447)

什么是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的开发了。

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

赞(3) 打赏

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

支付宝
微信
3

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

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

博客简介

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

精彩评论

友情链接

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

站点统计

  • 文章总数: 238 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 863 条
  • 链接总数: 14 个
  • 标签总数: 429 个
  • 建站时间: 1041 天
  • 注册用户: 2886 人
  • 访问总量: 8668665 次
  • 最近更新: 2019年10月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线