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的开发了。
转载于:https://www.cnblogs.com/guolaomao/p/6276877.html
yeoman生成react基本架构相关推荐
- 从零开始React项目架构(四)
前言 使用当前的webpack配置能不能打包构建项目呢?当然可以,但这不是我们想要的,所以,让我们来看一看生产环境需要怎么配置webpack吧 开发 生产环境配置 在根目录创建webpack.pro. ...
- React系列——React Fiber 架构介绍资料汇总(翻译+中文资料)
原文 react-fiber-architecture 介绍 React Fibre是React核心算法正在进行的重新实现.它是React团队两年多的研究成果. React Fiber的目标是提高其对 ...
- JHipster生成微服务架构的应用栈(二)- 认证微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(三)- 业务微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(一)- 准备工作
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- 【React项目架构 】+后台管理系统cms实操
React项目架构 一. react脚手架 (一) .yarn 安装 (二) .react安装 npx create-react-app [-g] npm i react@17.0.0 react-d ...
- 去中心化的 React Native 架构探索
首发于微信公众号"Shopee技术团队". 1. 背景 React Native(下文简称 RN)是混合应用领域流行的跨端开发框架.RN 非常适合灵活多变的电商领域业务,由于 RN ...
- 转载:React Fiber架构(浅显易懂)
性能优化是一个系统性的工程,如果只看到局部,引入算法,当然是越快越好; 但从整体来看,在关键点引入缓存,可以秒杀N多算法,或另辟蹊径,探索事件的本质,可能用户要的并不是快-- React16启用了全新 ...
- 用yeoman搭建react画廊项目笔记
1.安装yeoman npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...
最新文章
- SAP QM 源检验(Source Inspection)功能展示
- 菜鸟刚入手Python第一天
- 命令注入_命令注入绕过方式总结
- 龙芯linux内核,龙芯的linux kernel,内核开发与编译
- vsftpd增加用户 linux,Ubuntu Linux中vsFTP添加用户
- java让弹窗在最上层_layer弹出层显示在top顶层的方法
- Visio画UML图基本操作及技巧解析
- 蓝桥杯2016年第七届C/C++省赛B组第五题-抽签
- 黑马程序员-Java学习笔记之抽象类,接口,多态和内部类
- 广告屏蔽大师 v5.4.521.1800
- linux 打包qt可执行文件
- 梅特勒托利多电子秤显示EEP服务器错误,梅特勒-托利多电子天平常见故障的解决方法...
- 李彦宏:人工智能的互联网时代已经到来
- UTC时间(世界协调时间)和北京时间转换
- 计算机基础使用操作培训ppt,计算机基础操作培训课件ppt课件.ppt
- 控制科学与工程学科简介
- vscode 更新后报错 Couldn‘t start dlv dap
- css预处理器(less学习笔记)
- 【HTML】HTML网页设计---叮当猫网页设计
- Android Q(10.0)上IMEI获取不到;Android Q(10.0)上OAID替代IMEI;OAID获取方式
热门文章
- Java输出箭头_java基于XSSF 导出带箭头的直线
- 电脑硬件知识学习_电脑故障小知识自己动手不再花冤枉钱
- Docker 入门尝鲜
- 【二】Java变量与常量
- linux csi驱动添加,CSI接口Camera驱动学习
- 解决mysql ERROR 1045(28000)问题【忘记密码,修改配置文件,无密码登录mysql修改密码】
- Java基础入门笔记-新建类
- django的orm指定字段名,表名 verbose_name_plural
- dir612路由器虚拟服务器设置,dir612虚拟服务器设置
- isvisible java_.NET(C#) Selenium操作调用浏览器判断页面元素(ElementIsVisible)可见的方法...