window安装react.js开发环境

系统管理员 2023-10-06 21:55 1阅读 0赞

## 一、npm: [Nodejs][]下的包管理器。 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]

打开CMD，检查是否正常  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\\node-v16.14.0-x64  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_14_color_FFFFFF_t_70_g_se_x_16]  
然后运行以下2条命令  
npm config set prefix “D:\\node-v16.14.0-x64\\node\_global”  
npm config set cache “D:\\node-v16.14.0-x64\\node\_cache”  
![在这里插入图片描述][26e0f250d6854dd789edad94940f71ba.png]  
检查是否设置成功：npm list -global  
![在这里插入图片描述][ead2ec963c2244c7ae383bb29404bd1d.png]  
引进淘宝镜像npm config set registry=http://registry.npm.taobao.org  
![在这里插入图片描述][e994de10613640a6a602837f000a7842.png]  
查看配置信息npm config list  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
更新npm  
npm install npm -g  
![在这里插入图片描述][e6516f9745224e0b82195635f7c806aa.png]  
注意，此时，默认的模块D:\\nodejs\\node\_modules 目录  
将会改变为D:\\nodejs\\node\_global\\node\_modules 目录，  
如果直接运行npm install等命令会报错的。  
我们需要做1件事情：  
1、增加环境变量NODE\_PATH 内容是：D:\\node-v16.14.0-x64\\node\_global\\node\_modules  
![在这里插入图片描述][507c23c0376046e694700d504f179a2c.png]

## 二、安装react ##

npm install -g create-react-app

## 三、创建项目first-react-demo ##

create-react-app first-react-demo

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
进入first-react-demo项目文件夹、  
cd first-react-demo

开始启动项目 ：npm start  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]  
会自动打开浏览器显示web页面  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_19_color_FFFFFF_t_70_g_se_x_16]  
react环境安装成功，可以进行开发啦！

[Nodejs]: https://nodejs.org/zh-cn/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a8fb429520a74d18844f125993097d76.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e88ab03212ae4878b070162830e563e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/968e5248a50941dbb629b67a41fe3c66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d1003d30fbf3495ab238a07c4b006184.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2fb9b20306b0446b9e0b42f075a33fb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/c752532bb4d44bcdbbda727d22cd364c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_17_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/4b7cabf3ccee418e8845b4ee97b18f4d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9986462feff74168a6863712ce6789a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ca63089de4d64a61b2515317abe806ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/41f61a4558d2412fa8331f93fa0d2d02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_14,color_FFFFFF,t_70,g_se,x_16
[26e0f250d6854dd789edad94940f71ba.png]: https://img-blog.csdnimg.cn/26e0f250d6854dd789edad94940f71ba.png
[ead2ec963c2244c7ae383bb29404bd1d.png]: https://img-blog.csdnimg.cn/ead2ec963c2244c7ae383bb29404bd1d.png
[e994de10613640a6a602837f000a7842.png]: https://img-blog.csdnimg.cn/e994de10613640a6a602837f000a7842.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/0f686bde10974422aada0271992d7da4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[e6516f9745224e0b82195635f7c806aa.png]: https://img-blog.csdnimg.cn/e6516f9745224e0b82195635f7c806aa.png
[507c23c0376046e694700d504f179a2c.png]: https://img-blog.csdnimg.cn/507c23c0376046e694700d504f179a2c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/19f0163ea4254b0db4d84acc12491dba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e2f200969efc4c42a0c6444403f40d96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ac6320d893f549a4a3c1bc04f5fa873e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_19,color_FFFFFF,t_70,g_se,x_16