行业知识
Vue开发环境 Nodejs安装 cnpm安装与卸载
���录
Vue概述：
Vue特点：
Vue官网:
一、node.js安装和配置
1. 下载安装node.js
Step1：下载安装包
Step2：安装程序
Step3：查看
二、修订
三、环境配置
1、更改npm安装全局模块的目录和缓存路径
2、设置环境变量
① 新建NODE_PATH
② 编辑用户变量（环境变量）的 path
③ 在Path里面添加NODE_PATH
Tips：如果出现安装失败
三、Node.js测试
1.安装express，使用npm命令——>
2.安装webpack，使用npm命令——>
3.验证路径
四、下载安装cnpm
1、配置淘宝镜像
2、安装cnpm（按需安装）
问题解决：
解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.
1.问题原因
2.解决尝试一
3.解决尝试二
⭐⭐npm常用命令
vue前端框架的环境搭建
Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架
- 构建用户界面：把数据通过某种办法变成用户界面
- 渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件
Vue概述：
Vue是什么:Vue.js是一套由美籍华人（尤雨溪）开发的相应式系统，前端开发库。
2014年2月尤雨溪开源了前端开发库Vue.js。
2016年9月3日，尤雨溪以技术顾问的身份加盟阿里巴巴Weex团队。
他全职投入Vue.js的开发，立志将Vue打造成Angular/React平级的世界顶级框架Vue的核心库只关注视图层，非常容易和其他库整合
Vue非常适合开发复杂单页应用
Vue可实现数据和视图的双向绑定
Vue特点：
①轻量级框架，vue提供MVVM双向数据绑定，依赖模板表达式和计算属性，使用简单快捷vue可以将一个web开发Vue通过指令将数据和页面进行交互
③中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发
④与传统Web页面通过链接切换页面（重新刷新页面）不同，Vue通过客户端路由实现页面的平滑切换 Vue的界面属于响应式，在各种设备上都具有好的显示效果
Vue官网:
Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/
一、node.js安装和配置
1. 下载安装node.js
检查电脑上是否配备 node。
【命令行输入 node -v】【出现版本信息则说明已经安装好了】
我这里尚未安装node.js 接下来可以一同一步步操作。
官网下载最新版本：Download | Node.js
可以下载安装包（安装教程见：Node.js 安装配置 | 菜鸟教程）
或者下载zip文件找个目录保存，解压下载的文件，然后配置环境变量，将解压文件所在的路径配置到环境变量中。
Step1：下载安装包
这里我选择windows64位操作系统，如上图。
Step2：安装程序
①下载完成后，双击安装包，开始安装，使用默认配置安装一直点next即可，安装路径默认在C:Program Files下，也可以自定义修改
下载完成后进行安装（傻瓜式操作，下一步--下一步即可）
②安装路径默认在C:Program Files下面，也能够自定义修改，而后点击next（我这里设置我的安装目录为D:\software\nodejs\根据自己的需要进行更改。）
③下图根据本身的需要进行，我选择了默认Node.js runtime，而后Next
- Node.js runtime ：表示运行环境
- npm package manager：表示npm包管理器
- online documentation shortcuts ：在线文档快捷方式
- Add to PATH：添加到环境变量
④以下图框中所示，我没有选中，而是直接next
⑤点击Install，进行安装
⑥点击finish，完成安装
⑦安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,咱们能够查看系统变量进行验证：在【个人电脑】右键→【属性】→【高级系统设置】
⑧点击【高级】→【环境变量】
⑨在系统变量中查看【path】，点击【编辑】
⑩会发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中
由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息
Step3：查看
① 既然已经将node程序添加到全局系统变量中，把咱们能够直接在CMD窗口中任意位置执行node，打开CMD窗口，执行命令node -v查看node版本
【注意：此时是打开CMD窗口，并非在C:Program Files odejs目录下执行node.exe】
② 最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本
这里注意：
存在警告信息，可以按照下面问题解决中的进行解决。
npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead
二、修订
本次由于更新系统，在win11上重新安装，安装完成后查看并没有出现相应的警告信息。大家没有警告信息的可以参照如下进行配置。
三、环境配置
1、更改npm安装全局模块的目录和缓存路径
npm install xxx时默认存放路径为：C:\Users\用户名\AppData\Roamin
咱们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径C:\Users\Administrator\AppData\Roaming\npm\node_modules下
能够经过CMD指令npm root -g查看
开始配置更改(自定义npm install xxx 存放路径)：进入Node安装根目录，创建“node_global”和“node_cache”空目录文件夹——>分别用于当前node资源的安装和缓存
重点注意：还需要在node_global目录下在创建一个“node_modules”空目录文件夹。
① 打开安装的目录（默认安装情况下在C:Program Files nodejs）在这里我的为：D:\software\nodejs
② 在安装目录下新建两个文件夹【node_global】和【node_cache】
③在node_global目录下在创建一个【node_modules】空目录文件夹。
④再次打开cmd命令窗口，输入npm config set prefix “你的路径node_cache”（“你的路径”默认安装的状况下为D:\software\nodejs ）
npm config set prefix "D:\Software\nodejs\node_global"
⑤ npm config set cache “你的路径 node_cache” 可直接复制刚刚新建的空文件夹目录
执行的时候建议使用管理员权限打开CMD，否则有可能会提示权限不够报错
npm config set cache "D:\Software\nodejs\node_cache"
2、设置环境变量
① 新建NODE_PATH
打开【系统属性】-【高级】-【环境变量】，在系统变量中新建
变量名：NODE_PATH
变量值：D:\Software\nodejs\node_global\node_modules
（ 用来告诉系统， 下载的模块或者包都在这里了）
② 编辑用户变量（环境变量）的 path
编辑用户变量（环境变量）的 path，将默认的 C 盘下 APPData\Roaming\npm 修改成 D:\Software\nodejs\node_global，点击确定
修改后如下：
此时，cmd中 npm root -g 的结果更改为D:\Software\nodejs\node_global\node_modules
③ 在Path里面添加NODE_PATH
在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】
Tips：如果出现安装失败
可能是你没有使用管理员身份运行cmd窗口，可以修改一下【node_global】和【node_cache]的权限 或者直接修改【nodejs】的权限
步骤： 鼠标右击【node_global】的文件夹，点击【属性】，再点击【安全】，再点击【编辑】，将不同的用户名 权限都勾上，随即点击【确定】即可，【node_cache】步骤同理。
更直接的方式就是将【nodejs】文件夹的权限进行修改：
三、Node.js测试
配置完成后，安装个module测试下。
咱们就安装最经常使用的express模块和webpack模块，打开cmd窗口，输入以下命令进行模块的全局安装：
1.安装express，使用npm命令——>
npm install express -g
2.安装webpack，使用npm命令——>
npm install webpack -g
3.验证路径
进入“D:\Software\nodejs\node_global\node_modules”验证，安装的Module都存放在该路径下。
可能会有如下警告信息，需要参考【问题解决】 中的方法。
四、下载安装cnpm
使用cnpm(淘宝镜像)：
使用npm下载依赖时，由于是从国外的网站上下载内容，所以可能经常会出现不稳定的情况，所以需要下载cnpm代替npm
cnpm是国内淘宝的做的，在国内使用稳定。
安装cnpm命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
或 npm install -g cnpm --registry=https://registry.npmmirror.com
为了方便，首先配置淘宝镜像，而后实现cnpm安装！！！！！！
1、配置淘宝镜像
淘宝镜像官网：npmmirror 镜像站
必须使用右击“以管理员身份运行”运行Windows PoweShell，键入
相关命令：
永久设置：“npm config set registry https://registry.npm.taobao.org”
检查安装：“cnpm -v”
查看当前镜像地址：“npm config get registry”
恢复原镜像地址：“npm config set registry https://registry.npmjs.org”
①查看当前镜像地址：
npm config get registry
②配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
2、安装cnpm（按需安装）
说明： npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。
npm install -g cnpm --registry=https://registry.npmmirror.com
查看是否安装成功
命令： cnpm -v
上面所安装的cnpm、express会出现在【node_global】下的【node_modules】文件夹里
卸载cnpm方法：
1.卸载原有旧的版本：
npm uninstall -g cnpm --registry=https://registry.npm.taobao.org
2.注册模块镜像：
npm set registry https://registry.npm.taobao.org
3.node-gyp 编译依赖的 node 源码镜像
npm set disturl https://npm.taobao.org/dist
4.清空缓存
npm cache clean --force
5.重新安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
问题解决：
解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.
在安装完 node 环境后，npm -v 显示如下问题
npm WARN config global --global, --local are deprecated. Use --location=global instead.
8.11.0
1.问题原因
问题出现在，以前版本npm的命令一般时XXX -g 但是随着版本更替，这个老方法被弃用了
2.解决尝试一
在node的安装路径下
我们需要修改两个文件npm和npm.cmd
将npm文件的第23行，修改成下图样式，命令如下，可以直接粘贴
prefix --location=global
将npm.cmd文件的第12行，修改成下图样式，命令如下，可以直接粘贴，修改完保存。
prefix --location=global
在这里我遇到了权限不够的问题，如下解决：
3.解决尝试二
电脑文件权限不够，
我们需要修改两个文件npm和npm.cmd
鼠标右击属性，安全将权限打开。
此时修改完成。
如若大家还有问题可以做接下来的尝试（我第二个解决就搞定了，因此第三个解决尝试没有试过）
解决尝试三：
使用npm时，报错：npm WARN config global --global, --local are deprecated. Use --location=global instead.
将npm升级到最新版本即可
升级方法
1.在windows中以管理员身份打开cmd，然后执行命令
npm install -g npm-windows-upgrade
2.更改脚本策略
下载Windows Power Shell
然后以管理员身份运行，执行命令
set-ExecutionPolicy RemoteSigned
输入Y
成功更改脚本策略
3.在Windows Power Shell上运行命令
npm-windows-upgrade
问题解决！
最终结果如下：
⭐⭐npm常用命令
npm -v：查看npm安装的版本。
npm init：会引导你建立一个package.json文件，包括名称、版本、作者等信息。
npm list：查看当前目录下已安装的node包。
npm ls：查看当前目录下已安装的node包。
npm install moduleNames：安装Node模块到本地目录node_modules下。
npm install -g：将包安装到全局环境中。
npm install --save：安装的同时，将信息写入package.json中，项目路径中若是有package.json文件时，直接使用npm install方法就能够根据dependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
npm install --save-dev：安装的同时，将信息写入package.json中项目路径中若是有package.json文件时，直接使用npm install方法就能够根据devDependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
npm uninstall moudleName：卸载node模块。
上一篇：有机房抱闸在哪里？
下一篇：怎么用服务器做端口转发?
