前端环境安装【mac/window,nvm管理多个版本node,node,npm,yarn,react】

目录

nvm

安装

window

mac

常见命令

Node、npm

yarn

React

a.全局方式

b.临时方式

运行


nvm

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 版本号 下载对应node版本(如:nvm install 14.20.1)

nvm use 版本号 切换node版本

nvm on 开启nvm

nvm off 关闭nvm

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 - 掘金

相关推荐
codeGoogle4 小时前
自研 IM 还是选择第三方 SDK?企业开发者应该如何权衡?
前端·后端·程序员
zzzzzz3105 小时前
从 react-bits 看动效组件化:别把视觉效果写成一次性页面代码
javascript·react.js·开源
用户938515635075 小时前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒5 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李5 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
赵大仁7 小时前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui
kyriewen8 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
IT_陈寒8 小时前
我又被JavaScript的隐式类型转换坑了
前端·人工智能·后端
其美杰布-富贵-李9 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区9 小时前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程