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 成功

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

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页