一、VSCode下载与安装

1.直接官网下载

下载界面如下：

User Installer: 默认安装在当前计算机帐户目录，如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。vscode默认提供的为User Installer。

System Installer: 安装在非用户目录，例如C盘根目录，任何帐户都可以使用。

.zip: 这边是直接下载压缩包，放入自定义目录下，不需要exe文件安装流程

以上三种方式，根据自己的需求安装即可。

2.下载好.exe执行文件后，双击—>"我同意此协议"—>"下一步"

3.浏览选择自己设置的安装路径，注意路径中不要含有中文，然后点击下一步，下一步

4.选择附加任务

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

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

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

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

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

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

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

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

至于创建桌面快捷方式看个人需求，选好点击下一步。

5.确认安装项无误后，点击开始安装

6.安装结束，点击完成

二、VSCode配置vue环境

在Visual Studio Code上搭建vue开发环境有几个步骤：

1.下载安装node.js
要开始配置Vue开发环境，首先需要安装Node.js及其包管理器npm。Node.js是一个基于Chrome V8引擎的JavaScript运行时，npm则是Node.js的包管理器。

选择LTS版本，最好不要选择current版本

我使用的是.msi文件安装

双击，然后一直点next.

可自定义选择安装路径，然后再一直点击"Next"，最后点击"Install",完成安装

然后验证安装是否成功

使用“win+R”打开命令行工具，输入以下命令以验证Node.js和npm是否安装成功：

当显示了其版本号（我这里的版本是v22.15.1）,即表示安装成功。

PS：

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便日后管理，所以我配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache

设置配置变量：
npm config set prefix "C:\Coding\nodejs\node_global"
npm config set cache "C:\Coding\nodejs\node_cache"

配置环境变量

"环境变量" -> "系统变量" ：新建一个变量名为“NODE_PATH”

"环境变量" -> "用户变量" ：编辑用户变量里的Path，将相应的路径进行更改为D:\VSCode\npm\npm_install\node_global，如下：

将上述的“C:\Use\asus...\npm”更改为“D:\VSCode\...\node_global”

在cmd命令下执行 npm install webpack -g  安装webpack

2.安装cnpm

cnpm 是 npm 的中国镜像，帮助解决在中国大陆由于网络问题导致的 npm 包下载缓慢的问题。使用 cnpm 可以大幅提高安装速度。安装和使用 cnpm 的步骤如下

①输入以下命令：

npm install -g cnpm --registry=https://registry.npmmirror.com

这条命令会全局安装 cnpm，并设置包的下载源为 https://registry.npmmirror.com，这是一个 npm 的中国镜像源。

②再输入cnpm -v命令，查看结果

安装完cnpm后，可以像使用npm一样使用cnpm。例如安装一个包：

cnpm install [package_name]

这里的 [package_name] 是你想要安装的 npm 包名。

注：如果不想安装cnpm，也可以通过配置 npm 使用中国镜像源的方法来加速包的下载。

运行以下命令，将 npm 的默认仓库地址修改为中国镜像地址：

npm config set registry https://registry.npmmirror.com

这样配置后，你就可以继续使用 npm 而不是 cnpm，并享受到类似的下载速度提升。

恢复npm默认仓库地址

如果需要将 npm 的仓库地址恢复到默认值，可以执行：

npm config set registry https://registry.npmjs.org/

通过以上方法，你可以根据自己的需要选择安装 cnpm 或者仅仅修改 npm 的配置，解决国内访问 npm 慢的问题。

3.安装vue/cli教授架

Vue CLI 是 Vue.js 提供的一个标准化的开发工具，帮助你快速创建和管理 Vue 项目。

①全局安装Vue CLI : 打开终端或命令提示符，输入以下命令来安装Vue CLI：

cnpm install -g @vue/cli

②验证安装：安装完成后，输入vue  --version 来确认Vue CLI是否安装成功

显示了其版本号，表示安装成功

4.创建vue项目

①在终端或命令提示符中，进入你想要创建项目的目录，然后输入以下命令：

vue create my-vue-project

你可以将my-vue-project替换为你的项目名称

②选择配置： 在创建项目时，Vue CLI 会提示你选择一个预设或手动选择配置。你可以选择默认配置或根据需要进行自定义配置。

5.运行vue项目

①打开项目：在VSCode中，选择"文件" —>  "打开文件夹" ,然后选择刚刚创建的Vue项目文件夹

②安装Vetur插件：为了在 VSCode 中获得最佳的 Vue 开发体验，你需要安装 Vetur 插件。点击左侧活动栏的扩展图标（四个方块图标），然后在搜索栏中输入“Vetur”，点击“安装”。

③安装ESLint插件：为了保持代码风格一致并发现潜在错误，建议安装 ESLint 插件。在扩展市场中搜索“ESLint”，然后点击“安装”。

④运行项目：在终端中，进入项目目录并运行以下命令启动开发服务器：
npm run serve

服务器启动后，你可以在浏览器中访问 http://localhost:8080 查看你的 Vue 应用。