vue-cli

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自带的热重载功能。