zoukankan      html  css  js  c++  java
  • yeoman生成react基本架构

    工欲善其事必先利其器。在开始react开始之前,我们先使用一系列的前段工具构建自己的前端集成解决方案。

    环境配置:

    Bower,node js,npm,Grunt,Gulp,Yeoman

    作者一直使用Mac Os编程,不了解其他环境的情况。

    首先安装node js

    访问网址:https://nodejs.org/en/

    现在安装node js。

    因为npm有时下载包会速度会特别慢甚至完全卡死,所以推荐使用smart-npm来执行npm命令。

    在命令行执行命令:

    npm install --global smart-npm --registry=https://registry.npm.taobao.org/

    这样smart-npm就安装好了。smart-npm与npm在使用上没有区别,

    我在电脑已经有梯子的情况下在未安装sarmt-npm前执行后面yo命令是的时候依然会被卡住。

    安装smart-npm 后就十分顺利的解决了。

    smart-npm 到底是什么 参照 https://github.com/qiu8310/smart-npm/

    安装 yeoman

    snpm 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

    在终端输入命令行:

    snpm install -g generator-react-webpack

     构建你的项目

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

    yo react-webpack gallerty-by-react

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

     

     

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

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

    这样我们的项目基础框架就配置好了。

    在项目文件夹内 执行

    npm run start

    项目在本地就运行起来了。终端会提示你的项目的端口好,一般是8000 8080 或者8888

    在浏览器输入 

    http://localhost:8000/

    就能看到运行起来的网站了。 

      

    最后在chrome应用商店添加react的调试小程序。

    https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

    这样你的项目基础框架就构建好了。可以准备开始react的开发了。

  • 相关阅读:
    eharts入门篇一
    手机侧滑导航栏
    用js+cookie实现商城的购物车功能
    实现文字底部居中
    超出两行或三行显示省略号
    clear-fix清除浮动的两种写法
    sass学习入门篇(三)
    如何回答面试中问到的Hibernate和MyBatis的区别
    设计模式之--单例模式
    设计模式之---工厂模式
  • 原文地址:https://www.cnblogs.com/guolaomao/p/6276877.html
Copyright © 2011-2022 走看看