前端小白配置mac下node+vue开发环境的各种姿势

背景：笔者（前端小白）之前mac环境下用的node 9.8.x版本，npm 6.13.4版本，昨天尝试ts，用vue-cli构建项目对时候，vscode给提示说node版本太低了，好，笔者听从前辈经验，打算安装一个nvm，再升级node，结果nvm硬是安装失败，后来按照网上资料，用n安装了node10.19的最新版（因为有人说12会有不兼容的问题），升级了node之后，用vue create构建项目失败了，一直报“Cannot read property 'resolve' of undefined”的错误，然后笔者发现不论是npm install还是npm uninstall，都报错，泪奔。。。

环境：Mac、vsCode

第一种姿势：简单搭建清爽的node+npm开发环境，适合固定node版本的环境开发（亲测有效）。

1、如果已经安装过node+npm，node需要升级的情况，笔者良心推荐还是先卸载重新安装，免得像笔者一样折腾很久；

// 官网下载pkg安装包的，一条命令卸载 node+npm
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

2、去node官网下载最新长期支持版（LTS版本）安装包：https://nodejs.org/zh-cn/

3、安装包安装受阻的话去安全隐私里面勾选允许安装就可以了；

4、安装cnpm提速，安装后在vue项目中用到npm install的地方用 cnpm install，一眨眼就完成了，非常优秀；

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
// or
npm install -g cnpm --registry=https://registry.npm.taobao.org

注：当全局下载包时可能会报如下错误：Missing write access to /usr/local/lib/node_modules，出现原因：访问权限 的原因，在苹果下载则加上sudo，然后会提示您输入密码～

5、安装vue-cli；

sudo cnpm install -g @vue/cli
// or
cnpm install -g @vue/cli

==========分割线在此==========

如果因项目需要，经常要切换不同版本的node环境，就需要用到node版本管理工具啦，最常用的是nvm和n，接下来笔者为你分别介绍。

第二种姿势：使用n管理，n是node的一个模块，是一个轻量级的node版本管理工具。需要注意的是，n是基于npm才能安装的工具（用过）。

// 安装n的命令
npm -g install n

// 使用n安装node不同版本的命令
n stable #安装最新的稳定版
n lts #安装最新的 LTS 版
n 6.9.0 #安装特定的 v6.9.0 版本

// 在指定文件切换node版本的命令
n use 7.6.0 index.js

第三种姿势：使用nvm管理，nvm是比较主流的node版本管理工具，每个node版本的模块都会被安装在各自版本的沙箱里面（因此切换版本后模块需重新安装）；

1、安装nvm：https://github.com/nvm-sh/nvm

// 目前最新版本是 0.35.3
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

2、安装完 nvm 后，输入nvm，当看到有输出“Node Version Manager”时，则 nvm 安装成功。 如果遇到以下提示：

-bash: nvm: command not found

1）在 .bash_profile 文件中键入如下代码，配置环境变量。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

如果没有这个文件，可以按照下面的步骤创建一个：

• 启动终端Terminal
• 进入当前用户的home目录：输入cd ~
• 创建.bash_profile：输入“touch .bash_profile”
• 编辑.bash_profile文件：输入“open .bash_profile”
• 在弹出的.bash_profile文件内进行编辑上述代码，完成后保存并关闭。

2）更新注册表

source ~/.bash_profile

3、nvm常用命令：

nvm --version ## 查看nvm的版本

nvm current 或 nvm version  ## 显示当前使用的node版本

nvm ls 或 nvm list ## 列出所有安装的版本

nvm ls-remote ## 列出所有远程服务器的版本（官方node version list）

nvm install stable ## 安装最新稳定版 node

nvm install <version> ## 安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4 

nvm uninstall <version> ## 删除已安装的指定版本，语法与install类似

nvm use <version> ## 切换使用指定的版本node

nvm run <version> app.js  ## 用指定版本运行app.js  eg: nvm run 10.0.0 app.js 

nvm alias <name> <version> ## 给不同的版本号添加别名

nvm unalias <name> ## 删除已定义的别名

nvm reinstall-packages <version> ## 在当前版本 node 环境下，重新全局安装指定版本号的 npm 包

上述命令中，以笔者的经验，比较常用的就是列出本地版本，以及切换版本，即 nvm list，和 nvm use <version>两个命令。

4、此后接上第一种姿势的第四步、第五步继续配置cnpm以及安装vue-cli即可；

nvm看起来是很高大尚的工具，笔者几次尝试也没能安装成功，总是报错如上“-bash: nvm: command not found”的错，如果重新执行curl安装命令行，则会报错 “curl: (7) Failed to connect to raw.githubusercontent.com port 443”，神奇的是笔者执行到第二步的括弧1之后重启电脑，再次输入nvm命令，就可以正常使用nvm了，现在牢牢的抱上了nvm的大腿，起飞～

折腾了两天，笔者除了写出自己尝试的过程外，还将网上参考过的资料整合，请大家食用，欢迎拍砖。

 

扩展阅读：

1、《管理 node 版本，选择 nvm 还是 n？》

参考资料：

1、《在Mac下彻底卸载node和npm的方法》

2、《淘宝 NPM 镜像》

3、《利用n工具轻松管理Node.js的版本》

4、《node.js版本管理工具n无效的原理和解决方法》

5、《mac中nvm的安装和使用》

6、《正确的安装和使用nvm》

7、《Mac OS 下 NVM 的安装与使用》

8、《Missing write access to /usr/local/lib/node_modules 解决方案》