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

什么是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) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"使用yeoman快速搭建基于webpack的React项目"

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题源码 

精彩评论

友情链接

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

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 7 个
  • 评论总数: 964 条
  • 链接总数: 14 个
  • 标签总数: 471 个
  • 注册用户: 2 人
  • 访问总量: 8,672,013 次
  • 最近更新: 2020年10月31日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线