vue2项目创建全流程——细节但简易上手版

一、node.js安装

1.下载与安装

下载网址如下：

https://nodejs.org/en/

由于是vue2项目，所以推荐使用18.x版本的LTS长期支持版本更稳定，是最优选，过新或过老的版本可能存在vue2不兼容的情况。
下载好后双击运行，无脑下一步即可安装好。

2.环境变量配置

安装完成后使用win+R 输入cmd打开命令窗口输入以下内容：

若是能成功输出版本号可以跳过这一步，若是输出如图所示，需手动配置环境变量：

打开环境变量窗口，在Path中添加，nodejs安装根目录路径：

二.安装vue脚手架

由于网络问题，使用npm官方源安装模块可能会导致速度慢或连接失败，安装脚手架前需切换国内的镜像源
使用win+R 输入cmd打开命令窗口输入以下命令切换淘宝镜像源

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

npm config get registry

并检查是否切换成功

然后使用以下命令安装脚手架：

npm install -g @vue/cli

三.以脚手架的形式创建vue2项目

进入工作空间所在的文件夹

输入cmd，打开命令行工具，输入：

vue create project-name

中间会提示你使用vue2或者vue3的插件和特性创建项目，这里我们使用vue2

出现successfully，说明项目创建成功。

四.启动项目

接下来我们使用vscode进行开发，打开vscode，选择文件-打开文件夹打开我们创建的项目

使用快捷键Ctrl+~打开终端，输入以下命令，即可启动项目：

npm run serve

若是出现无法识别npm的选项：
a.首先请按照2.环境变量配置中重新确认一遍环境变量是否配置正确，配置成功
b.可以重启vscode再重新输入，vscode在安装前就已经打开，导致环境变量没有加载
出现以下画面，表示项目成功启动：