web前端开发环境配置终极指南Mac 安装下载器 brew, 全程无出错安装 git win自行下载 node 强烈推荐

注意一定按照顺序来

工具准备

Mac用户，安装 brew 安装工具

自动执行命令

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

全自动安装命令brew，Mac最好用环境安装工具，全程自动
- 选择中科大镜像源，如果弹窗需要安装工具，点击安装
- 弹窗需要安装软件装，安装可能时间比较长
- 安装完毕测试命令 brew doctor // 自检命令
  - 抛出 command not found: brew 错误
  - 命令行粘贴重新安装
  - 执行自检命令 brew doctor
  - 最终提示安装成功信息

安装Git

win用户
- 直接下载安装
Mac用户
- brew install git
- 抛出错误 # fatal: not in a git directory
  - 使用brew -v，仔细看，可以发现有两个fatal(致命错误)提示
  - 直接命令行执行提示就行

git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-core

git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-cask

安装nvm node版本管理工具 推荐使用 node 14.17.0 比较稳定，如果以前装过就删掉

Win用户

自行下载nvm-setup.exe

下载完毕配置 nvm下载node镜像源

执行 nvm root 显示安装目录路
在根目录找到或者创建 settings.txt 文件
写入或者追加一下内容务必切换nvm下载node为淘宝镜像

    root: D:\Users\15201\AppData\Roaming\nvm
    path: D:\Program Files\nodejs
    --------------------------------------
    node_mirror: https://cdn.npmmirror.com/binaries/node/
    npm_mirror: https://cdn.npmmirror.com/binaries/npm/

Mac用户安装NVM

执行命令 brew install nvm
主要操作位置
- 找到需要操作的位置，Mac用户配置文件夹，类似window用户文件夹
  - 类似windows用户文件夹 ->window/users/name Mac的用户文件夹 -> /Users/xxx
```
cd ~ # 执行进入用户文件夹
pwd # 查看当前位置
```

手动创建NVM安装文件夹

```
 mkdir .nvm
```

Mac设置始终显示隐藏文件

    # 执行1
    defaults write com.apple.finder AppleShowAllFiles -bool true
    # 执行2
    killall Finder

安装到到此文件夹
重新执行命令 brew install nvm

配置全局变量

创建环境变量文件 touch .zshrc 有则追加后面
第二步粘贴命令行显示内容，内容就是nvm全局配置内容
粘贴命令行标红部分,粘贴自己命令行显示的，大致如下

# nvm全局变量配置
export NVM_DIR="$HOME/.nvm"
     [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" 
     [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
# nvm淘宝镜像配置，否则下载node非常卡
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

最后一定记得,运行执行命令,到此结束.

source .zshrc

nvm通用命令使用步骤

nvm list 查看所有node版本
nvm use 16.13.1 使用指定版本node
nvm list available 查看现在使用的node版本
nvm install 16.13.1 安装指定版本node
nvm uninstall 16.13.1 卸载指定版本
nvm alias default Mac切换默认版本
nvm list-remote 查看所有可以安装版本

Mac npm 全局模块配置命令，安装 NRM 全局命令行都可以访问

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

设置npm 包依赖位置，缓存

设置原因
因为node默认将全局模块，据
防止在C盘文件持续过大
不要初始化安装部要下载任何模块，先修改位置
npm配置文件设置

找到 .npmrc npm配置文件

显示配置文件路径
- npm config get userconfig
- 默认在 C:\Users\xxxx.npmrc
没有创建一个
里面内容大致如下

    # 缓存包位置
     cache=D:\install\nodejs\node_cache
    
    # 全局包位置
     prefix=D:\install\nodejs\node_global
     
    # 设置设置包依赖为淘宝镜像源
     registry=https://registry.npmmirror.com
     
    #设置node-sass引用为淘宝镜像，避免大量项目因为node-sass启动失败
     sass_binary_site=https://cdn.npmmirror.com/binaries/node-sass
    
    #输出npm配置
     npm config list

nrm npm包镜像源控制全局模块
npm i nrm -g
查看是否下载到刚才设定位置
win10 win11 会禁止本地执行脚本,设置检索，开发者选项最后一下允许
卸载
- npm uninstall -g nrm
查看源
- npm ls
切换源
- nrm use taobao

下载 yarn

安装 yarn
npm i yarn -g
找到 yarn 需要配置环境变量到bin目录
同样找到 .yarnrc 文件在npm 同级文件
设置淘宝镜像源
- yarn config set registry registry.npmmirror.com
缓存位置
- yarn config set cache-folder "D:\yarn\cache"
- yarn config set global-folder "D:\yarn\date"
设置国内node-sass镜像源
- yarn config set SASS_BINARY_SITE npmmirror.com/mirrors/nod…

最后

windows系统使用 windows-build-tools 来为我们完成大部分烦人的工作。全局安装此工具将依次设置 Visual C++ 软件包、Python 等等避免异常报错。

web前端开发环境配置终极指南

注意一定按照顺序来

工具准备

安装Git

安装nvm node版本管理工具 推荐使用 node 14.17.0 比较稳定，如果以前装过就删掉

nvm通用命令使用步骤

设置npm 包依赖位置，缓存

最后

`安装nvm` node版本管理工具 `推荐使用 node 14.17.0` 比较稳定，如果以前装过就删掉