windows下安装稳定版本nodejs和npm以及配置vue脚手架

nodejs版本是:v10.16.3
npm版本是:6.11.3
教程如下:

一.下载稳定版本的nodejs包

可以去nodejs官网去查看稳定版本的nodejs
网址如下:https://nodejs.org/en/download/current/
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第1张图片
安装之前,先了解下面的内容:
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
点击运行
在这里插入图片描述
可以使用默认路径,本例子中自行修改为D:\nodejs
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第2张图片
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第3张图片
一路点Next
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第4张图片
点击Finish
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第5张图片
打开CMD,检查版本
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第6张图片
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第7张图片
发现已经添加了path路径,虽然自带了npm,但不是最新版。
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第8张图片
再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs。先如下图建立2个目录
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第9张图片
然后运行以下2条命令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

如图,我们再来关注一下npm的本地仓库,输入命令npm list -globalwindows下安装稳定版本nodejs和npm以及配置vue脚手架_第10张图片
输入命令:

npm config set registry=http://registry.npm.taobao.org //配置镜像站,提升速度
npm config list //显示所有配置信息

windows下安装稳定版本nodejs和npm以及配置vue脚手架_第11张图片
我们关注一个配置文件C:\Users\Administrator.npmrc
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第12张图片
使用文本编辑器编辑它,可以看到刚才的配置信息
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第13张图片
检查一下镜像站行不行命令1

npm config get registry

在这里插入图片描述
检查一下镜像站行不行命令2, 看看能否获得vue的信息

npm info vue

windows下安装稳定版本nodejs和npm以及配置vue脚手架_第14张图片
输入如图命令升级:

npm install npm -g

npm install是安装命令或更新命令,第二个npm是模块名,-g表示全局安装,意思会装在global目录下,也就是安装到D:/nodejs/node_global里面。从图中可以看到npm升级成功了。
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第15张图片
再次输入命令npm list -global查看global目录里面不为空。
注意,此时,默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
我们需要做1件事情:

二.增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

windows下安装稳定版本nodejs和npm以及配置vue脚手架_第16张图片
注意:一下操作需要重新打开CMD让上面的环境变量生效)

1.测试npm安装vue.js

命令:

npm install vue -g

这里的-g是指安装到global全局目录去**
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第17张图片
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第18张图片
2.测试npm安装vue-router

命令如下:

npm install vue-router -g

在这里插入图片描述
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第19张图片
运行npm install vue-cli -g安装vue脚手架
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第20张图片
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第21张图片
编辑环境编辑path
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第22张图片
对path环境变量添加D:\nodejs\node_global
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第23张图片
重新打开CMD,并且测试vue是否使用正常
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第24张图片
注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第25张图片
初始化,安装依赖
运行npm install安装依赖
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第26张图片
运行npm run dev
在这里插入图片描述
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第27张图片
成功界面,提示打开地址http://localhost:8080
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第28张图片
自动打开浏览器http://localhost:8080/#/
在这里插入图片描述
运行npm run build,生成静态文件,打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述:
windows下安装稳定版本nodejs和npm以及配置vue脚手架_第29张图片
这样node安装完成,npm更新成功,vue脚手架安装成功,同时配置成功了!亲测成功,如有疑问,下方可留言。
参考链接:
1.npm安装教程 - Gold_Long - 博客园
https://www.cnblogs.com/goldlong/p/8027997.html

你可能感兴趣的:(node)