node.js和Vue的安装

目录

一.Node安装

二.Vue安装

---

一.Node安装

下载：Node官网：下载 | Node.js 中文网

 根据需要选择合适的安装包

图1 选择安装包 

 打开下载好的node.js安装包，点“Next”

图2 点“Next” 就对了

勾选"I accept the terms in the License Agreement",点"Next"

 

图3 点“Next” 就对了 

选择安装路径，可以用默认路径（但最好不要用默认的），使用自己设置的安装路径（一般设置在D盘），点“OK”

图4 点“OK” 就对了 

设置好安装路径后点"Next"

图5 点“Next” 就对了 

点"Next" 

图6 点“Next” 就对了 

点"Next" 

图7 点“Next” 就对了 

点"Install" 

图8 点“Install” 就对了 

 点"Finish",安装完成后Node.js的安装路径自动配置到Path环境变量中

图9 点“Finish” 就对了 

点击按键：Windows+R->cmd

键入node -v        //查看node版本 

键入npm -v        //查看npm版本

图10 查看node和npm版本 

配置： 

键入npm root -g        //查看全局安装的模块所在目录

图11 查看全局安装模块目录 

在node.js安装目录（自己设置的那个安装路径）下新建两个文件夹node_cache和node_global

图12 新建两个文件夹 

配置全局安装的模块路径（注意每个人的安装路径都是安装node.js时自己设置的安装路径，因此每个人都不一样，根据自己实际情况来）：

npm config set prefix “D:\Soft\Computer\Vue\Node\Node\node_global”        //注意每个人不一样

配置缓存路径：

npm config set cache “D:\Soft\Computer\Vue\Node\Node\node_cache”        //注意每个人不一样

图13  配置全局安装的模块路径和缓存路径

 键入npm root -g        //发现全局安装的模块路径已经切换成配置的路径

图14  查看全局安装的模块路径

键入npm config set registry=http://registry.npm.taobao.org

图15 配置镜像站 

 键入npm config get registry                //若输出http://registry.npm.taobao.org,表示配置成功

图16 获取镜像 

配置环境变量：

点击“环境变量”

图17 设置环境变量 

点击系统变量（s）的“新建” 

图18 新建系统变量 

 设置变量名和变量值

变量名可以根据自己需要随便取，我取的是“Node”

变量值可以设为安装node.js时自己设置的安装路径

图19 将新建的系统变量设置具体值 

点击Path变量 ，点“编辑”

图20 编辑Path系统变量 

在Path变量里添加node_global文件路径 

图21 在Path系统变量中添加node_global文件路径（法1）

其实不新建“Node”变量，直接在Path变量中添加node_global文件绝对路径也是一样的（使用“Node”变量就类似于使用的是相对路径）

图22 在Path系统变量中添加node_global文件路径（法2） 

二.Vue安装

点击按键：Windows+X，点击“Windows PowerShell（管理员）（A）”   ，注意不要点到上面一个

图23 打开Windows PowerShell 

键入npm info vue

图24 下载Vue 

键入npm install vue -g         //开始安装vue

图25 安装Vue 

键入npm i @vue/cli -g         //开始安装Vue-cli脚手架

图26 安装Vue-cli脚手架 

本文参考：Node.js和Vue的安装与配置（超详细步骤）_nodejs安装vue-CSDN博客

（这位博主写的既详细又易懂，原文内容更丰富，值得一看）