vue、webpack、vue-cli三者之间的关系以及使用脚手架工具快速搭建vue项目

三者之间的关系

第一：vue是一整套框架，而vue-cli只是它其中的一个脚手架，vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则；

第二：vue的开发本身是不依赖node的，不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。因此只能说webpack是依赖node的。

快速搭建一个vue项目

第一步：安装node.js（我安装的v10.16.0版本）

查看安装是否成功：node -v

第二步：全局安装vue-cli（我安装的2.9.6版本）  

1）如果速度慢可以换淘宝镜像：npm -g cnpm --registy=https://registry.npm.taobao.org

2）全局安装：npm install -g vue-cli@2.9.6

扩展：

查看vue-cli3.x及以上可以安装的版本：npm view @vue/cli versions --json

查看vue-cli2.x及以下可以安装的版本：npm view vue-cli versions --json

查看vue-cli安装版本：vue --version或者vue -V

第三步：安装webpack

在 webpack3 中，webpack与webpack-cli是绑定的。也就是你使用"npm i webpack -g"安装了webpack以后，webpack-cli是默认就安装上了。但是到了webpack4，这2个东西已经被分解成了2个完全独立的包，所以，你还需要独立安装webpack-cli。（我指定安装的3.6.0版本：npm install webpack@3.6.0）

安装webpack：npm install webspack -g
安装webpack-cli：npm i webpack-cli -g 
输入webpack -v，查看是否安装成功。

第四步：以上工作创建完毕，一条命令创建vue项目

IDEA新建一个JavaScriptProject，在Terminal中输入：vue init webpack，前三个（router及之前）选yes，后面全选否，然后等待即可，搭建好了访问即可访问。