Node.js下载安装及环境配置

一、下载对应自己系统的Node.js版本(本人这里是Windows10 64位)

下载地址：https://nodejs.org/en/download/

这里下载的是12.19.0的版本（新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，用来安装/卸载Node.js需要装的东西）

二、下载完成，开始安装

1、双击.msi安装包，开始安装Node.js，点击Next

2、勾选同意协议，点击Next

3、选择安装路径，点击Next

4、默认安装这四项，点击Next

5、这是可选的安装编译本机模块所需的工具(主要是Python和Visual Studio构建工具)，根据个人意愿可安装可不安装，我这里是未安装，点击Next

6、点击Install，开始安装

7、点击Finish，安装完成

8、测试安装是否成功：打开命令提示符窗口（【win+R】键，输入cmd）

# 测试命令：
node -v
npm -v

9、如上图所示，正常显示安装版本说明已安装成功！安装成功后的目录如下图所示：

三、配置环境变量（主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径）

1、默认情况下，我们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径（npm root -g命令查看）在C盘，这会占用C盘空间，若需要自定义安装路径，最好把全模块所在路径和缓存路径放在node.js安装路径下的文件夹中，则在node.js安装路径下创建两个文件夹【node_global】及【node_cache】：

2、创建完两个空文件夹之后，打开cmd命令窗口，输入配置命令

npm config set prefix "F:\App\nodejs\node_global"
npm config set cache "F:\App\nodejs\node_cache"

可通过（npm config ls）命令查看配置前后的变化

3、设置环境变量

右键点击“我的电脑”–“属性”-“高级系统设置”-“高级”-“环境变量”

点击“环境变量”-“系统变量”-新建“NODE_PATH”，输入“F:\App\nodejs\node_global\node_modules”

将“用户变量”-“Path”里面的npm默认路径“C:\Users\user\AppData\Roaming\npm”修改为“F:\App\nodejs\node_global”

到这里环境变量已经配置完成。

四、测试（通过安装个模块）

npm install express -g     # -g是全局安装的意思

下载成功之后，可以在NODE_PATH下看到相应模块；说明Node.js已经安装成功！

五、更换为淘宝镜像

由于npm是国外的，所以下载模块的时候会比较慢，这里我使用的是淘宝的镜像cnpm

# 方式一：临时使用
npm --registry https://registry.npm.taobao.org install express

# 方式二：持久使用(建议使用)
# 1) 配置npm的镜像为淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 2) 配置后通过下面方式来验证是否成功
npm config get registry

# 方式三：通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看版本
cnpm -v

镜像配置好后即可安装Vue/Vue-cli，执行完以下步骤，vue的环境就已经搭建好了

# 安装步骤(方式三)：
# 1) 通过方式三获取cnpm后，需要升级一下(因为安装Vue需要npm的版本大于3.0.0)，输入命令：
cnpm install cnpm -g
# 2) 安装Vue
cnpm install vue
# 3) 安装Vue-cli
cnpm install --global vue-cli

六、创建vue项目

# 1) 指定目录存放新建的项目，可以是任意路径，确定好后输入下面的命令：
vue init webpack "项目名称"
# 2) 成功之后，进入项目所在目录
cd "项目所在文件夹"
# 3) 依次输入下面的命令
cnpm install
cnpm run dev
# 4) 成功之后，在浏览器里面输入localhost:8080可以显示下面的页面