VSCode在win10上安装Vue开发环境（专治各种慢）

• 安装vscode
• 安装nodejs和npm
• 安装vue
• 创建vue项目
• 启动vue项目

整个环境搭建的过程中，vscode下载是一种慢，而vue项目创建时，也是一种慢，本文重点治这两种慢！

安装vscode

官网地址：

https://code.visualstudio/

但是非常遗憾，下载很慢，经常会断，只得另想办法。

网上有另外的镜像地址可以下载，而我采用了讨巧的方式，在联想软件商城中，也可以直接安装最新的版本，而且速度飞快。

而微软的store中，居然没有vscode提供安装，让我也是一阵无语！

安装nodejs和npm

下载网址：https://nodejs/en/

此处我选择的是14的版本（node-v14.16.0-x64.msi）进行了下载和安装，具体安装过程比较傻瓜，只有一步需要注意：

我在安装的时候，下面的页面勾选了，选择安装了一些工具：

安装nodejs的同时，也会安装npm这个工具，下面是进行测试：
打开windows的cmd命令行工具，分别运行如下命令：

能够看到nodejs的版本号和npm版本号，说明安装成功了！

安装vue

在vscode中，选择顶部的Terminal菜单，点击：New Terminal
然后按照在下图中的位置，输入命令：

npm install -g vue-cli

最后显示vue的版本号，表示安装完成！

如果上述步骤执行有问题，也可以打开windows的命令行工具cmd，cd到同样的目录，执行上述命令。

创建vue项目

在终端（Terminal）中，继续执行命令：

vue init webpack firstvue

其中firstvue为项目名字，可以根据自己的需要，自行修改。

此时，如果发现进度一直卡在了downloading template上，说明国外的数据下载速度有问题。

输入CTRL+C命令，终止命令的执行。

安装cnpm安装工具，该工具会从国内的镜像下载数据，比较快一点。
执行如下命令安装cnpm：

npm install -g cnpm

如下图，表示安装成功！

接着用cnpm安装webpack：

cnpm install -g webpack

再次执行命令，创建vue项目：

vue init webpack firstvue

安装过程中，会有配置问题需要回答，总的原则是，需要进行install或者setup的步骤，全部no，其他yes（参见下图中的第2步骤）

启动vue项目

切换到vue项目目录，执行npm run dev命令，即可启动项目：

在浏览器中访问地址：

http://localhost:8080/