十九、VSCode、Node.js安装配置、vue脚手架安装、Git

目录

一、VSCode安装

（3）配置

安装中文语言包

二、Node.js的安装（安装在其它目录）

（1）官网下载相应的版本（下载 | Node.js）

（2）傻瓜式安装，一路Next（建议安装目录换到其它盘：F:\nodejs）

（3）安装成功

三、Node.js的环境变量配置

（1）首先进入node.js的安装目录，新建node_global（全局包存放目录）和node_cache（缓存目录）两个文件夹，如下图：

（2）在cmd终端输入

（3）修改环境变量

四、Vuej脚手架的安装

（1）更换国内淘宝镜像（全局安装，最后安装至F:\nodejs\node_global）

（2）安装vue脚手架（在C盘下安装）

（3）脚手架使用面临的问题（全局安装，最后安装至F:\nodejs\node_global）

（4）脚手架的安装和卸载

五、Git

---

一、VSCode安装

（1）下载安装包

Visual Studio Code下载地址： https://code.visualstudio.com/

User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。

System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)

（2）安装

其他：

①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单

②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单

说明：①②勾选上，可以对文件，目录点击鼠标右键，选择使用 VScode 打开。

③将code注册为受支持的文件类型的编辑器

说明：默认使用 VScode 打开诸如 txt,py 等文本类型的文件，一般建议不勾选。

让 VScode 支持的代码文件全部变成 VScode 默认打开，文件图标也会随之更改，很好辨认。

④添加到PATH（重启后生效）

说明：这步骤默认的，勾选上，不用配置环境变量，可以直接使用。

（3）配置

安装中文语言包

安装中文（简体）包，关闭VScode，重启即可。

二、Node.js的安装（安装在其它目录）

（1）官网下载相应的版本（下载 | Node.js）

（2）傻瓜式安装，一路Next（建议安装目录换到其它盘：F:\nodejs）

（3）安装成功

三、Node.js的环境变量配置

在通过npm安装vue或webpack的时候，node.js默认安装在路径C:\Users\用户名\AppData\Roaming下，为了不占用C盘空间，并且C盘出现系统禁止脚本运行的情况（装vue脚手架时可能报错），所以强烈建议将路径改到安装包里的。

（1）首先进入node.js的安装目录，新建node_global（全局包存放目录）和node_cache（缓存目录）两个文件夹，如下图：

（2）在cmd终端输入

（3）修改环境变量

修改保存位置后，设置环境变量（我的电脑->属性->高级系统设置->高级->环境变量），在系统变量中新建一个NODE_PATH变量，变量值为文件node_modules的路径（在你node.js安装路径里就能找到）

再编辑用户变量里的Path，将最后一个路径C:\Users\用户名\AppData\Roaming改成刚刚新建的node_global路径F:\nodejs\node_global，配置完成。

四、Vuej脚手架的安装

（1）更换国内淘宝镜像（全局安装，最后安装至F:\nodejs\node_global）

由于npm是国外服务器提供，下载速度会慢一点，所以推荐更换镜像源为cnpm，

首先新建一个vue项目文件夹，按住shift键以及鼠标右键，进入powershell终端界面，输入命令行 npm install -g cnpm --registry=https://registry.npm.taobao.org 更换淘宝镜像。

安装完成 ，在F:\nodejs\node_global下输入命令行cnpm -v，若显示版本信息，则更换成功。（如果安装失败也没关系，直接用npm其实也不慢，两三分钟就OK）

（2）安装vue脚手架（在C盘下安装）

还是在当前界面，输入命令行 cnpm install -g vue-cli （没有淘宝镜像的则用npm install -g vue-cli ）回车等待一路自动安装即可。

（修改：使用命令npm install -g @vue/cli进行安装，不然会出现版本低的问题）

安装成功

（3）脚手架使用面临的问题（全局安装，最后安装至F:\nodejs\node_global）

解决方案：升级当前的CLI

分别执行

npm uninstall -g vue-cli 卸载原来版本的脚手架

npm install -g @vue/cli 安装新版本的脚手架

（4）脚手架的安装和卸载

卸载

//卸载3.0之前的版本
npm uninstall -g vue-cli

//卸载3.0之后的版本（可以统一使用此指令卸载）
npm uninstall -g @vue/cli

安装

npm install -g @vue/cli

五、Git