荐 Win10 系统安装配置 node.js 和 vue.js

今天学习 vue 开发，需要下载安装node.js 和 vue.js，搜了一遍，网络上都杂七杂八，太过成年老旧，所以我根据自己的安装经验，整理一份 Win 10系统的攻略，对大家的安装就便捷很多！

前言

安装 vuejs 之前一定要先下载安装 nodejs，以及安装好 npm和 cnpm

步骤
1.下载安装 nodejs
2.配置 nodejs, npm环境
3.下载安装 vuejs
4.下载安装 cnpm

1.去nodejs官网下载

https://nodejs.org/en/

我的电脑是64 bit，所以点击这个，如果你是 32 bit就点击隔壁那个

• 然后他就开始下载了，等他下载完，打开所在文件夹。

2.安装 nodejs

• 双击打开下载好的文件

• 点击 next

• 勾选 协议 ，点击 next

• 选择安装路径（你可以自己决定安装在哪个盘，我是D:/），点击 next

• 不用勾选，点击 next

• 点击 Install

• 等待半分钟，安装中！

• 安装完成，点击 Finish

3.检查 nodejs 和 npm 是否安装成功

• WIN+R 打开 cmd

输入 node -v  , 然后回车，显示版本号，则表示 nodejs安装成功！

输入 npm -v , 然后回车，显示版本号，则表示 npm安装成功！

4.配置 nodejs 环境

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

1.创建npm模块安装目录

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

分别在NodeJS安装目录下创建node_cache和node_global两个文件夹，如上图所示。
创建文件夹后，打开dos命令窗口，分别执行下面两行命令

npm config set prefix "node_global的路径"
npm config set cache "node_cache的路径"

例子：npm config set cache “D:\Program Files\nodejs\node_global”

2.配置环境变量

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

2.1新建NODE_PATH系统变量

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

2.2更改用户path变量

将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为下图：

点击确定！

2.3 修改镜像源

在命令行输入下面代码

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

2.4 测试

我们先安装一个express模块试试
打开dos命令窗口，执行下面的命令

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

安装成功
打开 D:\Program Files\nodejs\node_global\node_modules 文件夹

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

5.安装 vuejs

百度搜索 vuecli3  或者直接访问 https://cli.vuejs.org/
打开后是下面这个网页，点击 Get Start

进入下面这个页面

点击 安装，进入下面这个页面

如果你想用 npm安装，在命令行输入这句话即可，但是我更推荐使用 cnpm安装，更快！

我们可以使用这个网页提供给我们的 npm安装 vue ，但是很慢，我们也可以采用 cnpm 安装，十分快！不过我们要先安装 cnpm！我推荐各位使用 cnpm安装，npm确实很慢，很浪费时间！下面介绍如何用cnpm安装。

1.安装 cnpm

在 cmd 中输入下面的代码，安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功！

2.查询版本号，看是否安装

输入 cnpm -v

如果和我一样，那就是正确的。

3.用 cnpm 安装 vuejs

在 cmd 中输入下面代码 ，安装 vuejs
cnpm install -g @vue/cli

安装中…安装成功

4.查询 vue 的版本号

在 cmd 中输入   vue-V
注意 -V 要大写 V，小写会报错

安装 vuejs 成功

以上就是本文章的全部内容！写文不易，对你有帮助，请点个赞！谢谢！

本文地址：https://blog.csdn.net/weixin_43648017/article/details/107325272