前端环境安装【mac/window,nvm,node,npm,yarn,react】

目录

nvm:node版本管理器

安装

window

mac

常见命令

Node、npm

yarn

React

a.全局方式

b.临时方式

运行


nvm:node版本管理器

nvm 主要是用来管理 nodejs 和 npm 版本的工具,可以用来切换不同版本的 nodejs。
安装nvm之前先卸载node

Mac彻底卸载node

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

Windows系统完全卸载删除 Node.js_卸载nodejs命令-CSDN博客z

安装

window

mac

常见命令

nvm -v 查看当前版本
nvm --config 
nvm list 查看已安装node版本列表
nvm install <version> 下载对应node版本(如:nvm install 14.20.1)

nvm uninstall <version> 卸载
nvm use <version> 切换node版本
nvm on 开启nvm
nvm off 关闭nvm

nvm alias default 版本号 设置默认node版本

window下安装nvm,node, npm, yarn

Node、npm

# 依次执行以下命令
nvm install node版本
nvm ls 查看列表
nvm use node版本

node -v
npm -v

更换npm源为淘宝镜像
说明:npm 默认的 registry ,也就是下载 npm 包时是从国外的服务器下载,国内很慢,一般都会指向淘宝 https://registry.npm.taobao.org。
1、查看初始npm源,如图:

npm config get registry

2、更换镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org/
3、检查配置是否成功 

npm config get registry

yarn


# 全局安装yarn
npm install -g yarn
# 查看yarn 版本
yarn -v

 

React

a.全局方式

安装 Create-React-App:要安装 React 脚手架,您需要使用 npm 包管理器安装 Create-React-App。请在终端中运行以下命令:

npm install -g create-react-app

创建项目:现在您已经安装了 React 脚手架,您可以使用以下命令在 Mac 上创建新的 React 项目:

create-react-app my-app

启动项目:最后,您可以在终端中运行以下命令启动您的 React 项目:

cd my-app npm start

b.临时方式

 npx create-react-app your-app-name
 

create-next-app 版本 14.0.4 要求 Node.js 版本至少为 18.17.0

运行

cd my-app
npm start
 

这个过程为什么慢,因为这个过程实际会安装三个东西

1.react:react的顶级库.

2.react-dom:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom.

3.react-scripts:包含运行和打包应用程序的所有脚本配置.

Mac 搭建React脚手架环境create-react-app - 掘金


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用VNC实现Win系统远程桌面Ubuntu图形化界面【内网穿透】

文章目录 推荐前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 …

vue:处理base64格式文件pdf、图片预览

一、需求&#xff1a;后端返回是base64数据&#xff0c;需要前端处理来展示文件。 二、实现方法&#xff1a; 解释一下这段代码的功能&#xff1a; &#xff09;preview(item) 是一个函数&#xff0c;接受一个参数 item&#xff0c;其中包含了文件的相关信息。 &#xff09;首…

HTML5+CSS3+JS小实例:实时给中文添加拼音

实例:实时给中文添加拼音 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"&…

使用freessl为网站获取https证书及配置详细步骤

文章目录 一、进入freessl网站二、修改域名解析记录三、创建证书四、配置证书五、服务启动 一、进入freessl网站 首先进入freessl网站&#xff0c;需要注册一个账号 freessl网站 进入网站后填写自己的域名 接下来要求进行DCV配置 二、修改域名解析记录 到域名管理处编辑域名…

项目开发中安全问题以及解决办法——客户传进来的数据不可信

用户传进来的数据是不可信的&#xff0c;比如下面这种情况下&#xff1a; PostMapping("/order") public void wrong(RequestBody Order order) { this.createOrder(order); } Data public class Order { private long itemId; //商品ID private BigDecimal ite…

智慧水务管理的发展历史有哪些阶段呢

随着科技的飞速发展&#xff0c;智慧水务管理已经成为了城市基础设施的重要组成部分。从传统的人工管理到现代的智能化管理&#xff0c;智慧水务经历了多个阶段的发展历程。本文将带您了解智慧水务管理的历史演变。 一、初级阶段&#xff1a;人工管理 在智慧水务管理发展的初期…

MS2358——96KHz、24bit 音频 ADC

产品简述 MS2358 是带有采样速率 8kHz-96kHz 的立体声音频模数 转换器&#xff0c;适合于面向消费者的专业音频系统。 MS2358 通过使用增强型双位 Δ - ∑ 技术来实现其高精度 的特点。 MS2358 支持单端的模拟输入&#xff0c;所以不需要外部器 件&#xff0c;非常适…

maven环境搭建(打包项目)

Maven:直观来讲就是打包写好的代码封装 Apahche 软件基金会&#xff08;非营业的组织&#xff0c;把一些开源软件维护管理起来&#xff09; maven apahce的一个开宇拿项目&#xff0c;是一个优秀的项目构建&#xff08;管理工具&#xff09; maven 管理项目的jar 以及jar与j…

[C++]:12:模拟实现list

[C]:12:模拟实现list 一.看一看SGI的stl_list的源码&#xff1a;1.基础结构构造函数1.节点结构&#xff1a;2.节点构造函数&#xff1a;3.链表结构&#xff1a;4.链表的构造函数&#xff1a; 2.析构1.节点析构&#xff1a;2.链表的析构&#xff1a; 3.迭代器 二.模拟实现list1.…

py的函数多返回值

前言:之前我们学过了py中函数&#xff0c;这一章我们来学习它的进阶版 目录 一.函数的多返回值 1.1关于函数的多返回值 1.2举例 二.函数多种传参方式 2.1关于多种传参方式 2.2关键字参数 2.2缺省参数 2.3不定长参数 2.4小结 三.匿名函数 3.1关于函数如何作为参数进行…

HEXO搭建个人博客

Hexo是一款基于Node.js的静态博客框架&#xff0c;可以生成静态网页托管在GitHub上。中文文档见HEXO 配置环境 安装Git&#xff1a;下载并安装Git 检查git是否正确安装&#xff1a; git --version 安装Node.js&#xff1a;Node.js 为大多数平台提供了官方的安装程序。注意安装…

Day30- 贪心算法part04

一、柠檬水找零 题目一&#xff1a;860. 柠檬水找零 860. 柠檬水找零 在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xff0c;然后向…

android 自定义八边形进度条

自定义八边形动画效果图如下 绘制步骤&#xff1a; 1.先绘制橙色底部八边形实心 2.黑色画笔绘制第二层&#xff0c;让最外层显示一条线条宽度即可 3.再用黄色画笔绘制黄色部分 4.使用渐变画笔根据当前进度绘制覆盖黄色部分 5.使用黑色画笔根据当前进度绘制刻度条 6.黑色画笔绘制…

numpy darray 中是否存在某个 darray

在 A 中找到不等于 B 的数目 在一个 shape 为 (H,W,3) 的 numpy 数组中像素 不是 [255,255,255] 的数目。 代码如下&#xff1a; A [[[255,255,255], [1,2,3],[0,255,-1],[255,255,90],[255,255,255]],[[1,2,3],[0,255,-1],[255,255,90],[255,255,255], [255,255,255]]]A n…

使用Sqoop的并行处理:扩展数据传输

使用Sqoop的并行处理是在大数据环境中高效传输数据的关键。它可以显著减少数据传输的时间&#xff0c;并充分利用集群资源。本文将深入探讨Sqoop的并行处理能力&#xff0c;提供详细的示例代码&#xff0c;以帮助大家更全面地了解和应用这一技术。 Sqoop的并行处理 在开始介绍…

Java网络编程:概述--快速入门

I. 介绍 1.1 什么是网络编程 - 网络编程是指通过计算机网络实现程序之间的通信。在Java中&#xff0c;网络编程通常涉及到数据的传输、通信协议的使用以及与网络相关的各种操作。 1.2. 为什么学习Java网络编程 - Java网络编程是Java开发者重要的技能之一&#xff0c;因为它允许…

mybatis----小细节

1、起别名 在MyBatis中&#xff0c;<typeAliases>元素用于定义类型别名&#xff0c;它可以将Java类名映射为一个更简短的别名&#xff0c;这样在映射文件中可以直接使用别名而不需要完整的类名。 下面是一个示例&#xff1a; 在mybatis核心配置文件中配置typeAliases标…

SSH隧道技术

SSH隧道 简介 SSH隧道是一种通过SSH协议在两个网络节点之间建立安全通信的技术。它可以用于多种用途&#xff0c;包括加密和保护敏感数据传输、绕过防火墙限制、远程访问内部服务等。 应用&#xff1a; 端口转发&#xff1a;SSH隧道可以将本地端口转发到远程主机上&#xf…

合并K个升序链表(LeetCode 23)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一&#xff1a;顺序合并方法二&#xff1a;分治合并方法三&#xff1a;使用优先队列合并 参考文献 1.问题描述 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff…

华为OD机试 - 运输时间(Java JS Python C)

题目描述 M(1 ≤ M ≤ 20)辆车需要在一条不能超车的单行道到达终点,起点到终点的距离为 N(1 ≤ N ≤ 400)。 速度快的车追上前车后,只能以前车的速度继续行驶,求最后一辆车到达目的地花费的时间。 注:每辆车固定间隔 1 小时出发,比如第一辆车 0 时出发,第二辆车 1 …