Vue-cli脚手架工具就像后端使用maven创建项目，在我们使用maven创建项目，无非有两个目的：第一个就是通过Maven的依赖机制，能够快捷的管理依赖，第二个则是通过Maven来确定项目的结构，所谓的项目结构就是项目里有哪些文件和文件夹，以及文件夹是怎么样的层级关系。 问题：一个vue项目里的项目结构应该是怎么样的呢？我们能不能快捷获得这样的项目结构的呢？ 我们通过Vue-cli这种的脚手架工具就可以解决这样的问题，vue-cli里存放了很多的常用的骨架，直接拿来用就可以搭建一个拥有比较成熟的项目结构的项目

Vue-cli如何使用？

1.1 下载安装node.js

在使用Vue-cli之前我们需要到node官网（）进行node的下载安装，node.js是一个可以让前端项目运行在node.js提供的服务器上的一个工具，就是提供了一个服务器。在node.js中文网中我们可以选择下载安装方式，如图：

安装成功后，我们可以在打开命令窗口（win+r）,输入cmd进入，在命令窗口中，可以使用node -v 测试node是否安装成功；出现版本号即安装成功

2.2 安装 vue-cli脚手架

在命令窗口中执行 npm install vue-cli -g进行vue-cli的安装，其中npm是指使用node.js的命令，而-g表示的是全局安装。

如果下载速度慢，我们还可以使用淘宝镜像进行安装，如果使用淘宝镜像，我们则需要先在本地使用npm install -g cnpm --registry=https://registry.npm.taobao.org 指令安装淘宝镜像，然后再使用cnpm install vue-cli -g 进行vue-cli脚手架的安装

注：安装成功后 使用 cnpm install xxx 代替 npm install xxx

1.3 使用vue-cli下载项目骨架搭建项目

安装vue-cli后，我们可以在控制台输入vue list命令既可以查看当前可用的vue骨架。

使用vue init webpack-simple myvuedemo命令创建基于webpack-simple骨架项目名为myvuedemo的项目，创建过程中需要输入一些参数，回车是使用提示的值，也可以进行更改。

当使用命令下载完项目后，也需要跟maven工程一样，去下载依赖的jar包，具体步骤是：根据提示使用cd myvuedemo命令切换到项目路径下，然后再使用npm install安装项目依赖，如果使用淘宝镜像安装则使用cnpm install命令进行下载。

下载完之后通过命令npm run dev 或cnpm run dev（使用淘宝镜像）使用开发者模式打开项目，就能在浏览器页面看到当前的项目