npm和cnpm(windows)安装步骤
一、什么是npm和cnpm
npm(node package manager):nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
cnpm:因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
二、安装nodejs
1、首先前往nodejs官网下载nodejs
2、然后点击安装,选择自己要安装的路径,此处我选择的是:D:\Program Files\nodejs,安装至完成。
3.window+R,输入cmd,打开命令提示符窗口,输入:
npm -v
- 检测是否安装成功,如果输出版本号,则表示安装成功,如图:
二、改变原有的环境变量
1、首先配置npm的全局模块的存放路径、cache的路径,此处我选择放在:D:\Program Files\nodejs
输入如下命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
- 如下图所示:
完成后可以在文件夹中看到相应名字的文件夹,如下:
此处修改源为淘宝镜像,后续就不需要再安装cnpm了。
npm config set registry https://registry.npm.taobao.org
输入以下命令,可查看npm配置修改是否成功
npm config list
这时路径 C:\Users\用户名\ 下会多出一个 .npmrc 文件,用记事本打开就可以看到我们上面修改的信息。
2、在用户变量 PATH里
将 C:\User\用户名\AppData\Roaming\npm 修改为 你的安装路径\node_global(D:\Program Files\nodejs\node_global)
在 系统环境 变量添加NODE_PATH,输入路径为:
D:\Program Files\nodejs\node_global\node_modules
操作如下:我的电脑右击,打开属性->高级系统设置->环境变量->新建(系统变量下)->输入变量名NODE_PATH->变量值:输入上面路径,确定即可。
添加后在 系统变量-->Path 中添加 %NODE_PATH%
更新完环境变量一定要重启电脑!!!
3、在命令行输入以下命令安装express(注:“-g”表示安装到global目录下,就是上面设置的node_global中)
npm install express -g
可以看到node_global/node_modules下有express了,如图:
4、在命令行输入node进入编辑模式,输入以下代码检测是否能正常加载模块:
require('express')
如果成功,如上图显示;如果出错,检测下上面配置的NODE_PATH是否配置或者配置正确。
如果配置正确仍然出错先忽略吧,前提不影响使用!
三、安装 Vue
1、安装 vue.js
以管理员身份运行命令提示符,否则可能会因没有权限而报错( win+s 搜索命令提示符,右键以管理员身份运行即可 )
npm install vue -g
ps:-g 指的是全局安装,即安装到 node_global 全局目录下。
2、安装webpack模板
npm install webpack -g
由于 webpack 4x以上webpack将命令相关的内容放在了 webpack-cli 中,故需要安装 webpack-cli
npm install webpack-cli -g
要验证是否安装成功,输入 webpack -v 能输出版本号就表示安装成功!
如果不显示版本号,显示不是内部指令,关闭 cmd 重新打开即可!
如果和小编一样输出了一堆系统信息的也可以。(虽然不太清楚具体原因,但是我试了一下不影响后续安装配置)
3、安装 vue-cli 脚手架
npm install -g @vue/cli (3.0版本) ---选这个!!!
vue -V 验证
安装成功!
坑:
win npm 没权限问题,右键 目录 D:\Program Files\nodejs