VSCode创建Vue项目，以及vue脚手架搭建

目录

一.准备工作

1.安装VSCode

2.node.的安装与配置

3.安装配置脚手架vue-cli

二.创建vue项目

三.遇到问题与解决方法

---

一.准备工作

1.安装VSCode

VSCode的安装在前面博客中有详细介绍，链接：VSCODE的安装

2.node.的安装与配置

下载地址：https://nodejs.org/en/download/prebuilt-installer

（1）下载好之后，开始安装，勾选进行下一步

 （2）设置安装路径，尽量不要设置在C盘下面，根据需要自行修改。

（3）下图根据自身需要进行选择
Node.js runtime ：表示运行环境
npm package manager：表示npm包管理器
online documentation shortcuts ：在线文档快捷方式
Add to PATH：添加到环境变量

（4）可选可不选，点next，接着点install，最后安装成功。

（5）进入高级配置，进行环境配置，记得保存。

（6）查看是否安装成功，打开cmd，输入以下的命令。

出现版本号则安装成功。

（7）打开安装目录，新建两个文件夹node_global和node_cache.

再次打开cmd，输入以下内容：

3.安装配置脚手架vue-cli

打开VSCODE 终端，输入下面命令，等待安装完成。

npm install -g vue-cli

二.创建vue项目

1.安装vue

npm install vue

2.安装webpack

npm install webpack -g

3.创建项目

vue init webpack 项目名称

4.运行

npm run serve

三.遇到问题与解决方法

遇到问题：

在cmd中可以正常执行npm -v指令，但是在vscode终端中，无法执行npm，无法识别npm的命令。

解决方法：

方法一：【右键单击Vscode】以【管理员身份运行】【重启Vscodel（这种办法每次打开都用管理员身份比较麻烦，还是推荐第二种。
方法二：①【用户变量】的【path】添加npm所在路径的【环境变量】
使用管理员身份运行cmd的方法：点击左下角【开始】菜单，在搜索区域输入“命令提示符”，然后点击【以管理员身份运行】查看全局安装包。

再在配置中重新配置环境变量。确认保存。