01-搭建Vue脚手架（vue-cli）

一、那么我们就从最简单的环境搭建开始：

安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。

安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry=https://registry.npm.taobao.org）复制（这里要手动复制就是用鼠标右键那个，具体为啥不多解释），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

方法一：

使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码

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

检查是否安装成功：

$ cnpm -v

安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm就可以了。

==================

安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

二、通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

=======================================================

三： 创建项目

1 创建项目：

2 执行命令：

切到文件夹下边， 启动脚手架内置的webpack开发服务器， 开发服务器运行再了8080端口上

3 浏览器输入地址：

看到这个页面说明，我们成功创建了脚手架项目，同时启动成功

报错1：

初始状态查看vue版本：vue -V，显示2.9.6，再进行创建vue项目时出现以下情况：

以上翻译：vue create是Vue CLI 3的唯一命令，而你正在使用Vue CLI 2.9.6。

你可能想运行以下程序来升级到Vue CLI 3：

npm uninstall -g vue-cli

npm install -g @vue/cli

这是由于安装的版本太低，需要更新vue，第一步：命令框输入：npm uninstall vue-cli -g

此时，已经将旧版本删除，接下来安装新版本vue，第二步：命令框输入：npm install -g @vue/cli

此时，已经将新版本安装完成， 接下来查看vue验证是否已经更新到新版本，命令框输入：vue -V

验证完毕，此时已经更新到5.0.8，下一步就可以创建vue项目了

=======================================

报错2 ：

报错原因

node的版本对应不上，项目要求的是"^12.22.0 || ^14.17.0 || >=16.0.0"，而自己电脑上的是"14.15.1" 版本

解决方式：

在cpm输入运行以下命令： yarn config set ignore-engines true

四 清理欢迎界面

五 文件夹和文件含义, 关键文件里代码意思

六 单vue文件讲解