目录

一、下载和安装Vue

二、创建全局安装目录和缓存日志目录

​三、配置环境变量

四、安装vue

一、下载和安装Vue

首先下载node

官网下载地址Node.js — Download Node.js®

根据自己的电脑系统，选择适合自己的版本，推荐LTS，长久稳定版本。

下载好之后，双击下载的安装包。

①点击next

②勾选同意，点next

③建议把目录更换到自己想要安装的目录里面（我这里是提前建好一个目录D:\download_software\nodejs

④默认勾选，直接next

⑤不勾选，直接next

⑥install安装

⑦点击finish完成安装。

⑧同时按win+R,输入cmd,回车，打开终端。

在终端分别输入以下两个命令；

node -v npm -v

显示以下结果即为安装成功

安装后的完整目录：

二、创建全局安装目录和缓存日志目录 在我们的安装目录下，创建名为node_cache和node_global的两个文件夹。

打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix “你的安装目录\node_global” npm config set cache “你的安装目录\node_cache”

为了以后下载包快速，执行如下代码，修改源为淘宝镜像。（我刚开始使用淘宝镜像，显示镜像源有问题，说是需要修复，所以这里再提供一个华为源）

淘宝源

npm config set registry https://registry.npm.taobao.org 华为源

npm config set registry=https://mirrors.huaweicloud.com/repository/npm/ （二者选其一即可）

查看npm配置修改是否成功

npm config list

三、配置环境变量 在安装过程中，自动配置了两个环境变量，我们需要增加和修改一下。

1.环境变量—用户变量—选中Path—点编辑-将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 ：你的安装目录\node_global

2. 环境变量—系统变量—新建

变量名：NODE_PATH

变量值：你的安装目录\node_global\node_modules

（这里的node_modules目录还没有，之后的步骤执行后就会自动生成这个文件夹。）

3.在系统变量—Path添加上%NODE_PATH%

四、安装vue

npm install vue -g

（使用管理员身份运行这条命令，以防出现报错）

（如果在这里出现下面的报错，就把镜像源换成华为源）

出现下面即安装成功

2. 安装webpack模板

npm install webpack -g

3.安装webpack-cli

npm install webpack-cli -g

4. 安装脚手架vue-cli

npm install vue-cli -g

输入vue --version，能输出版本号即成功安装

5. 安装vue-router

npm install vue-router -g

安装好之后打开node_modules文件夹，可以看到安装的模块都统一在这里