首先，先列出我们在vscode上运行vue项目所需要的东西
1、下载并安装vscode
2、node.js环境（npm包管理器）
3、vue-cli 脚手架构建工具
4、cnpm npm的淘宝镜像

一、下载并安装vscode

在上一篇博客中写过附上地址：
https://blog.csdn.net/m0_46698214/article/details/118354958

二、配置node.js环境

安装node.js
1、从node.js官网下载并安装node（https://nodejs.org/en/）
一般都是点击下一步，到选择安装位置，我一般安装在D盘

其他的都是全部点击下一步，直到安装完毕

安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

2、配置node环境变量

3、配置系统变量
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

执行命令：
npm config set prefix “D:\development\nodeJS\node_global”
npm config set cache “D:\development\nodeJS\node_cache”

执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\development\nodeJS\node_modules”，如下图：

最后编辑用户变量里的Path，将相应npm的路径改为：D:\development\nodeJS\node_global，如下：

更改前：

在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效：
webpack 也已安装成功，执行 npm webpack -v 可以看到所安装webpack的版本号：

三、安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。

报错：

原因：
问题所在cnpm文件夹与npm文件夹不在同一文件夹下（npm 全局下载的包都在D:\development\nodeJS\node_global\node_modules目录下）
cnpm所在文件夹：D:\development\nodeJS\node_global\node_modules
npm所在文件：D:\development\nodeJS\node_modules

解决：
将cnpm文件夹移动至npm所在的文件夹下，再将cnpm和cnpm.cmd文件移至npm与npm.cmd所在的文件夹即可解决问题

cnpm文件夹移动前：

cnpm文件夹移动后目录：

cnpm和cnpm.cmd文件移动前：

cnpm和cnpm.cmd文件移动后

验证cnpm是否安装成功，可以通过查看版本：cnpm -v

四、构建vue-cli脚手架

执行命令cnpm install -g vue-cli

执行命令
npm/cnpm install -g vue
npm/cnpm install -g @vue/cli-init
第二个用cnpm 否则很慢

报错vue不是内部命令或外部命令

查看vue所在的路径

查看vue.cmd是否存在

配置环境变量

重新打开cmd命令提示行输入vue --version

创建vue空项目
在命令行中运行命令 vue init webpack firstVue。
这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中

项目未创建成功：
报错：
Command vue init requires a global addon to be installed.
Please run yarn global add @vue/cli-init and try again.

执行命令：cnpm install -g @vue/cli-init

执行命令：
vue init webpack firstVue 成功

声明：本篇博客部分内容参考以下两篇作者博客，特此鸣谢
https://blog.csdn.net/antma/article/details/86104068
https://www.cnblogs.com/weiwei-python/p/9754384.html