0基础-Vue2前端工程搭建保姆级教程

Vue2脚手架搭建教程：

本文使用版本：vue2.0

第一步：新建一个文件夹：VUE_Study

第二步：安装Nodejs。教程参考：

https://blog.csdn.net/qq_42257666/article/details/129909941
安装完成后打开cmd输入如下命令查看版本：

node -v

npm -v

用管理员身份（保险，一些同学的系统权限太高）打开cmd，输入如下命令建立vue脚手架：

npm install -g @vue/cli 

运行完成后cmd直接检查vue版本：

vue --version

*注：可能会出现如下情况：
You are using Node v10.14.2, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0.
Please upgrade your Node version.

解决办法：
1、执行卸载命令删除当前vue-cli：
cmd窗口输入：

npm uninstall -g @vue/cli

2、执行如下命令安装低版本的：

npm install -g @vue/cli@4.5.13

3、在cmd中执行：vue -V 命令；展示成功。

第三步：创建一个VUE项目

方式一：cmd搭建

跳转到前面建立好的目录VUE_Study，然后在地址栏输入cmd，回车，跳出该目录下的cmd

输入如下命令：

vue create 项目名称

注意：项目名称不要出现大写字母，否则会报错

输入命令后按回车，跳转到如下页面：
按住上下箭头进行选择，选择“Manually select feature",按回车

通过上下键移动，在相应的选项上按空格键实现选择，选择Choose Vue version、Babel、Router，去掉Linter/Formatter。按回车跳入下一页面。

你们可以根据需要进行选择，我选择2.x，按回车

输入"Y"，回车

选择"In package.json"，按回车

输入N，回车，开始创建

创建成功!
通过cd命令进入项目文件夹，运行npm run serve


输入上面的http://localhost:8080/进入Vue的初始化项目界面，创建完成。

然后使用idea或VScode将VUE_Study导入，即可开始编程之旅。

方式二：UI页面搭建

打开cmd，输入：

vue ui

回车后浏览器自动打开：

选择“创建”：