唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 技巧资源 > 使用yeoman快速搭建基于webpack的React项目

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

2017年12月21日 作者: 管理员 1513次浏览 条评论

什么是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

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

支付宝
微信
标签:

上一篇:

下一篇:

前端简介

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

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服