一、什么 是脚手架工具vue-cli?

类似于工人手里面的脚手架一样，帮助工人搭架子用，同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具

vue脚手架工具vue-cli_原型设计

 

二、vue-cli能做什么？

 vue脚手架工具vue-cli_node.js_02

 

三、vue-cli安装

前提条件: Node.js (>=4.x, 6.x preferred), npm version 3（必须安装Node.js）



npm install -g vue-cli


（1）用法：



$ vue init <template-name> <project-name>


template-name是引用的模板名称，project-name自己的项目名称

（2）eg（exempli gratia例如）:



vue init webpack my-projec


注意：webpack引用的模板名称， my-project项目名称

    所有官方项目模板都是在vuejs-templates组织中的仓库。 将新模板添加到组织后，就可以运行vue init <template-name> <project-name>来使用该模板。 可以运行vue list查看所有可用的官方模板。

（3）目前可用的模板：



webpack - 一个功能齐全的Webpack + vue-loader安装程序，带有热重载，linting，测试和css抽取。
webpack-simple - 简单的Webpack + vue-loader设置，用于快速原型设计。
browserify - 一个全功能的Browserify + vueify设置与热重载，linting和单元测试。
browserify-simple - 用于快速原型设计的简单的Browserify + vueify设置。
pwa - 基于webpack模板的vue-cli的PWA模板


（4）脚手架关键词解析

    软件开发的脚手架的概念是从建筑学术语上引申而来。在建筑学上，脚手架指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。你见过大楼施工吧？在大楼外墙围的那圈支架就是其中一种脚手架。

    在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

    比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。

.