安装VUE整套教程

一、NodeJS下载

1.下载NodeJS安装包

下载地址：NodeJS下载

安装VUE整套教程

2.开始安装

打开安装包后，一直Next即可。当然，建议还是修改一下安装位置，NodeJS默认安装位置为C:\Program Files

3.验证是否安装成功

打开DOS命令界面：

node -v

出现NodeJS版本即为安装成功！

npm -v

出现npm的版本号说明npm工具也已安装成功！

二、环境配置

说明：环境配置的目的主要是为了改变安装NodeJS依赖的下载位置，方便日后管理，以及配置缓存Cache的路径。因为NodeJS在执行安装语句时，会将安装的模块默认安装到**C:\Users\用户名\AppData\Roaming\npm**，从而占用C盘的空间。

1.创建npm模块安装目录

安装时，默认是使用国外的镜像，速度较慢。推荐使用国内镜像！

更换镜像

安装VUE整套教程

分别在NodeJS安装目录下创建node_cache和node_global两个文件夹，如上图所示。

创建文件夹后，打开dos命令窗口，分别执行下面两行命令

npm config set prefix "D:\MySoftware\nodejs\node_global"

npm config set cache "D:\MySoftware\nodejs\node_cache"

2.配置环境变量

我的电脑->右键->属性->高级系统设置->高级->环境变量

安装VUE整套教程

2.1新建NODE_PATH系统变量

安装VUE整套教程

其实看到这个变量值我开始是有一些疑问的，明明node_global是一个空文件夹，为什么这个值需要定义到一个不存在的文件夹上，原来后面node会自动创建。

2.2更改用户path变量

安装VUE整套教程

将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为下图：安装VUE整套教程

点击确定！

三、测试

我们先安装一个express模块试试

打开dos命令窗口，执行下面的命令

安装VUE整套教程

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

安装成功！

打开D:\MySoftware\nodejs\node_global\node_modules目录安装VUE整套教程

发现已经安装好了，而这个位置就是我们在环境变量中配置的NODE_PATH的值！

然后安装npm、cnpm、webpack

### 安装 `npm`

`npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。

### 由于网络原因安装 `cnpm`

```

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

```

### 安装 `vue-cli`

```

cnpm install -g @vue/cli

```

### 安装 `webpack`

`webpack` 是 `JavaScript` 打包器(module bundler)

```

cnpm install -g webpack

```

在使用vue ui 完成一系列操作，最后创建项目的时候卡住了，一直出不来，这是什么原因

可以这样，把全局的Npm仓库设置成为淘宝源，应该会加速安装的过程。

npm config set registry https://registry.npm.taobao.org

创建vue项目

C:\WINDOWS\system32>D:

D:\>vue ui

免终端开发Vue应用

安装VUE整套教程

然后安装npm、cnpm、webpack

相关推荐