NPM 安装 Vue 脚手架

1. webpack

前端项目工程化的标志之一就是引入了『编译』环节，而 webpack 就是最常见、最常用的前端项目编译工具。

说明

如果作类比的话，那么 npm + webpack ≈ maven 。

本来，我们应该是直接使用、配置 webpack ，由 webpack 来管理、配置、编译我们的 web 前端项目源码。只不过，直接去使用 webpack 会十分繁琐（专业人士除外），不简便。因此，前端各大框架（不仅仅是 vue）都提供了所谓的『脚手架』。通过『脚手架』对 webpack 进行二次『包装』。

这样，我们是『直接使用脚手架，间接使用 webpack』去管理、编译我们的 web 前端项目源码。

2. 介绍和安装

警告

vue 官方提供的用于快速搭建 vue 项目的脚手架名为 vue-cli 。实际上，从 3.x 开始，它的正式名称就更名为 @vue/cli，但在日常交流中，大家还是习惯性称呼为 vue-cli 。

通过 @vue/cli ，你能快速的构建一个基于 Vue 框架的 web 工程模板，最新的 @vue/cli 的版本是 4.x 。

官网：https://github.com/vuejs/vue-cli (opens new window)

这里有 2 点需要注意的：

1. vue-cli 正式的名字现在叫 @vue/cli，这是从 3.x 开始改的名字。在 1.x 和 2.x 时代，它叫 vue-cli 。首先先确保你没有安装老版本，或删除掉它

   npm uninstall -g vue-cli
   

2. vue-cli 从 2.x 升级到 3.x 之后，它的使用发生了一定的变化。例如：

   创建项目的所使用的命令，vue-cli 里是 vue init，到了 @vue/cli 就变为了 vue create 。所以，在查阅资料时，注意下它所使用的是哪个版本的 vue-cli。也许，因为版本问题，你复制粘贴过来的命令根本就执行不了。

安装 3.x 和 4.x 时代的 @vue/cli ：

npm install -g @vue/cli

安装结束后，你可以通过 vue --version 或 vue -V 查看 vue-cli 的版本信息。