Windows上的nodejs和vue的安装及环境变量配置

1.Node.js 安装包及源码下载地址为:https://nodejs.org/zh-cn/download/。

Windows上的nodejs和vue的安装及环境变量配置_第1张图片

步骤 1 : 双击下载后的安装包 ,如下所示: 

Windows上的nodejs和vue的安装及环境变量配置_第2张图片

步骤 2 : 点击以上的Run(运行),将出现如下界面:

Windows上的nodejs和vue的安装及环境变量配置_第3张图片 

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

Windows上的nodejs和vue的安装及环境变量配置_第4张图片 

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):

Windows上的nodejs和vue的安装及环境变量配置_第5张图片 

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)

Windows上的nodejs和vue的安装及环境变量配置_第6张图片 

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

Windows上的nodejs和vue的安装及环境变量配置_第7张图片 

安装过程:

Windows上的nodejs和vue的安装及环境变量配置_第8张图片 

点击 Finish(完成)按钮退出安装向导。

Windows上的nodejs和vue的安装及环境变量配置_第9张图片 

nodejs安装完成后检查版本及是否安装成功

打开cmd输入以下命令

node -v

npm -v

Windows上的nodejs和vue的安装及环境变量配置_第10张图片

输出了版本号就说明nodejs安装成功 

接下来开始配置nodejs相关的配置

步骤1:在node的平级目录下新建NodeModules的文件夹

 

 步骤2:在NodeModules文件夹里新建npm_global和npm_cache两个文件夹

Windows上的nodejs和vue的安装及环境变量配置_第11张图片

 步骤3:在NodeJs\node_modules\npm文件路径下编辑npmrc文件

prefix=F:\Work\NodeModules\npm_global
cache=F:\Work\NodeModules\npm_cache
registry=https://registry.npm.taobao.org/

registry的配置为淘宝镜像,这样就可以直接用npm,不用cnpm

Windows上的nodejs和vue的安装及环境变量配置_第12张图片

 Windows上的nodejs和vue的安装及环境变量配置_第13张图片

 步骤3:环境变量配置

用户变量配置

在path里添加nodejs安装目录下node_modules的路径

Windows上的nodejs和vue的安装及环境变量配置_第14张图片

 系统变量配置

在系统变量里新建NODE_PATH的变量,值为F:\Work\NodeModules\npm_global\node_modules

新建的npm_global文件夹里是没有node_modules的,这里可以先配置,待会运行安装命令后会自动生成

Windows上的nodejs和vue的安装及环境变量配置_第15张图片

 在系统变量的path里新增2个值,如图

Windows上的nodejs和vue的安装及环境变量配置_第16张图片

 nodejs的安装和环境配置就完成了,接下来我们安装vue

在cmd里分别运行 npm install vue -g和npm install vue-cli -g 

其中-g是全局安装,指安装到global全局目录去,如果不加-g,模块就会安装到当前路径下的node_modules文件夹下,没有目录则自动创建。

安装完成后,在cmd里运行 vue -V或者vue --version

Windows上的nodejs和vue的安装及环境变量配置_第17张图片

如果能输出版本号,就说明vue也安装成功了

以上就是nodejs和vue的安装及环境配置, 如果有不对的地方,欢迎大家在评论区指出,如有侵权,请联系删除。

你可能感兴趣的:(前端分享,vue.js,前端,javascript,npm,windows)