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

向右看齐 2024-04-17 05:46 75阅读 0赞

**1、安装VS Code**

（1）官网下载 [https://code.visualstudio.com/][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/][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 如果显示版本信息，则说明安装成功。

![20190823191605709.png][]

（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即可。`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 1][]

![20190824143544344.png][]

(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，启动成功后会提示访问路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 4][]

[https_code.visualstudio.com]: https://code.visualstudio.com/
[https_nodejs.org_en]: https://nodejs.org/en/
[20190823191605709.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/5f250fd1156a4a4a9888606edfe8b89f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/e4cbf939274d4164ad9a1b2a5f9f015b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/f3826df22cd04ba5a5e0244cce1c7a0c.png
[20190824143544344.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8c700819657d49eca1531ed7d2554a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/bc3f2c465bb64ecf9639718cccd9c7b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ab6af2d7a7f444c189679eb2ff72f0c8.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMxNTYwMA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/282d485f7e474e9591aa8997fe4ad7c7.png