vue-cli是vue.js官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具是一套成熟的vue项目架构设计，会跟着vue版本的迭代而更新，能够为用户带来现代化的前端开发流程，只需要几分钟就可以创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装
要想使用vue-cli来快速生产项目，首先需要安装全局的vue-cli，此处一定要在全局模式下安装，否则无法使用vue命令。
全局安装命令：npm install vue-cli -g
安装完成后，可通过查看版本来检查是否安装成功。
版本查看命令：vue --version
此时就安装成功了。
vue-cli做为能为我们提供基本项目结构的脚手架，其本身就集成了很多的项目模板，我们可以通过命令来查看官方推荐模板。
模板查看命令：vue list
个人觉着其中常用的两个是webpack-simple和webpack，webpack-simple比较适合小型项目，没有代码检测，而webpack则更适合大型项目，有完善的Eslint代码检测和单元测试。
创建项目
创建项目的时候，我们首先需要选择合适的位置放置项目，然后选择需要的模板和合适的项目文件名称。（需要说明的是，在实际的工作中，个人是超级不推荐将项目放在C盘的，此处只是为了方便，才暂时这样操作，希望不要产生误导）
创建项目命令：vue init 模板 名称
在上面的例子中，我们在默认位置使用webpack-simple模板创建了一个名为cli-demo-one的项目。
此时，我们会发现存放项目的位置多了一个项目文件夹cli-demo-one，就是我们刚刚用脚手架快速生产的项目。打开文件夹，可以看到如下结果。
运行项目
我们可以按照刚刚上面创建项目时给出的提示运行项目。
首先是切换盘符目录到项目的根目录下，然后下载项目所需要的依赖。
当我们下载完项目依赖后，会发现项目根目录下多了一个文件夹，就是用来存放项目所有依赖的。
这个文件比较大，所有后期我们如果需要拷项目，都是拷整个项目文件夹中除这个文件夹以外的所有东西，包括很多从网上下的项目，也都是没有这个文件夹的。拷完或者下载完项目以后，通过命令行进入项目跟目录。执行npm install就可以下载项目相关依赖了。基本操作同这一步一样。
下载完项目以后，我们来运行项目。
此时，浏览器会自动打开一个新窗口localhost:8080
这里，我们可以发现项目默认的是8080端口，但是在实际工作中，可能8080端口会被占用，就不会有上面的自动打开甚至会报错，此时我们可以在package.json中进行端口更改。
只需要将上面的代码改成下面所示自己需要的或者空闲的端口。
然后再重新运行项目即可了。
接下来我们打开src文件夹下面的App.vue
我们将上面的代码进行更改如下
然后Ctrl + S保存，这是我们发现不需要我们手动刷新，浏览器已经自动刷新了。
这就是vue-cli自带的热重载功能。