Vue3安装配置+VSCode开发环境搭建，超详细保姆级教程（图文）

1. node.js 下载安装

nodejs官网下载链接：https://nodejs.org/zh-cn/download
推荐带TLS标识的长期维护的版本，选择版本后，这里我们直接使用prebuilt的msi安装包安装。

下载好打开安装包，选择自己要安装的路径，其他都默认配置即可。安装时会有 “是否需要自动安装工具” 的提示框，可以不勾选，后期需要再单独安装。

安装路径在后续设置环境变量时需要用到，我的安装路径放在D:\app\nodejs目录。

2. 查看 node.js 是否安装成功

安装node.js时会自动安装 npm， 我们查看一下 node 和 npm 的版本。

输入cmd打开命令提示符窗口, 输入 node -v 和 npm -v 查看安装的版本号。

 node -v 

 npm -v

3. 配置 npm 下载的默认安装、缓存环境

主要配置 1. npm 下载的全局模块所在路径 和 2. 缓存 cache 的路径。

(1) 添加文件夹

在 node.js 的安装路径下增加两个文件夹， “ node_cache ” (用于存放缓存资源) 和 " node_global "（用于存放下载安装的全局模块）。
我存放在 D:\app\nodejs 目录下，大家根据前面安装的实际路径来。

(2) 设置系统环境变量

修改环境变量，

系统搜索 “查看高级系统设置” - “环境变量” - “系统变量” - “新建”
变量名： NODE_PATH 
变量值： D:\app\nodejs\node_modules （修改成自己的nodejs路径）

如果系统环境变量无法新建、编辑、删除，一定要通过“ 查看高级系统设置 ”进入该页面。

修改系统环境变量 Path
编辑Path，确保D:\app\nodejs存在，并新增
D:\app\nodejs\node_global（修改成自己的nodejs路径）

(3) 修改下载模块的存放路径

默认的存放路径为 C:\Users\用户名\AppData\Roaming\npm，容易占满
C盘空间。建议修改。

输入cmd打开命令提示符窗口, 配置相应路径（按实际情况修改为自己的路径）

 npm config set prefix "D:\app\nodejs\node_global"
 npm config set cache "D:\app\nodejs\node_cache"

配置完成后，查看修改是否成功

 npm config get prefix
 npm config get cache

4. npm 镜像源配置

原npm下载速度较慢，需要设置镜像。用以下命令配置阿里的 cnpm 命令行工具，后续可以使用 cnpm install 命令来代替 npm install， 加快下载速度。

(1) 输入cmd打开命令提示符窗口,

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

（以前的 https://registry.npm.taobao.org/ 镜像网站已停止维护，请使用上面最新的镜像）

(2) 如果配置报错

检查是否有权限编辑该文档，并使用管理员模式运行命令提示符窗口。显示下面窗口则表示安装成功。

(3) 查看镜像配置是否成功

npm config get registry  （返回阿里的镜像地址即可）
cnpm -v                  （返回cnpm的版本号）

5. 安装 vue-cli 工具

输入cmd打开命令提示符窗口, 配置相应路径（按实际情况修改为自己的路径）

 cnpm install -g @vue/cli

提示安装成功即可。

6. VSCode 配置

到这一步，基本配置都已经完成，我们可以尝试来新建项目并打开网页了。

(1) 安装插件

安装 vue-official （官方推荐） 和 vetur 插件。

(2) 新建并允许 vue 项目

在 VS Code 中打开 terminal，进入项目准备存放的文件夹。
创建 vue3.0 项目 （项目名中不要出现中文和大写字母）

 vue create 项目名

出现提示选择默认的 vue3 即可。

根据提示进入项目文件夹，运行即可。

 cd helloworld
 npm run serve

7. 大功告成

不出意外的话，这里可以成功打开 VSCode 中给出的地址，显示以下界面了！

https://cn.vuejs.org/guide/quick-start
后续就可以根据官方文档学习提升了~