windows系统安装VS Code，并使用VS Code创建Vue项目完整教程

1、安装VS Code

（1）官网下载 https://code.visualstudio.com/ 下载VS Code，按照步骤安装即可。

（2）设置简体中文：Ctrl+Shift+P 或者 选择View >> Command Palette，然后输入Configure Display Language 选择zh-cn，如果没有zh-cn选项，则选择Install additional languages安装简体中文，然后选择zh-cn，重启vs code即可。

2、安装node.js

（1）官网 https://nodejs.org/en/ 下载node.js，按照步骤安装即可，node.js安装完成之后会同步安装npm。

（2）配置环境变量：把node.js安装路径配置到环境变量Paht中，例如：D:\Personal Program\nodejs，使用node.js安装包安装时一般会自动添加环境变量。

（3）查看node.js是否安装成功：打开cmd，输入ndoe -v 和 npm -v 如果显示版本信息，则说明安装成功。

（4）设置npm全局插件和缓存路径，如果不设置则默认在C:\Users\huijuan\AppData\Roaming\npm 下

npm config set prefix D:\Program\nodejs\node_global  路径可根据自己存储位置修改

npm config set cache D:\Program\nodejs\node_cache  路径可根据自己存储位置修改

3、安装vue

（1）在vs code终端中执行：npm install -g vue-cli，出现如下界面表示vue安装完成。

 如果提示：npm: 无法将“npm ”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。则表示未安装node.js，请根据第二部安装node.js即可。如果npm命令仍不能用，则重启VS Code即可。

（2）配置vue环境变量：如果设置了npm的全局路径，则vue一般会安装到此位置。例如：D:\Personal Program\nodejs\node_global，把该路径配置到环境变量Path中。

4、此时基本环境已经具备，接下来就是创建vue项目

（1）选择  文件 >> 打开文件夹  选择要创建项目的文件目录。

（2）在“终端”中输入：vue init webpack projectName，其中projectName可以自行修改。

在下面步骤中，一些需要填写或选择的选项，我都直接Enter了，一些需要安装的我都直接No了，各选项具体意思在此不做过多描述。如果创建vue项目时有报错信息，暂时不用管它，后面我们可以在重新安装更新。

(3）按照上图提示，cd 到刚才项目目录，但是暂时不要启动。需要重新初始化依赖，初始化依赖步骤为：

       1）执行npm cache clean --force 清除缓存。

       2)（可选）执行npm set registry https://registry.npmjs.org/，设置官网镜像路径。该步骤是可选操作，如果在执行3）时没有问题，该步骤可以不执行。如果执行3）时有错误，则从1）重新执行一遍。

      3）执行npm install 重新初始化依赖。

（4）启动项目，执行npm run dev，启动成功后会提示访问路径。

（5）根据提示，访问http://localhost:8080，会访问到如下界面。至此，VS Code创建Vue.js项目已经完成。