1.Vue-cli简介

Vue-cli是Vue的脚手架工具，主要包含有三个组件：

1).CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

2).CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

3).CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）

简单来说，Vue-cli主要作用有：目录结构、本地调试、代码部署、热加载、单元测试等等。

2.Vue-cli3安装

vue cli有2.0和3.0版本之分。

vue-cli2.0 安装：

npm install vue-cli -g;

初始化项目：

vue init webpack(模板类型) 项目名称;

运行：

npm install; //安装依赖项
npm run dev; //开发模式启动

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。使用node -v命令查看当前nodejs版本号是否符合安装要求。

node -v

由于Vue CLI3 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先卸载旧版本，否则无法安装vue-cli3版本，卸载命令如下：

npm uninstall vue-cli -g

安装vue-cli3.X版本

npm install -g @vue/cli

查看是否安装成功.

vue --version

vue-cli3创建vue项目的方式不同了,使用以下命令：

vue create hello-world

而vue-cli2.x版本创建项目命令如下：

vue init hello-world

创建成功后，一个vue项目目录结构图如下所示：

对比vue-cli3与vue-cli2的区别

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)