一、vue脚手架基本概念

1.1、什么是vue脚手架？

vue脚手架的英文名为 Vue-cli 。 CLI 是 Command-Line Interface, 翻译为命令行界面,。 Vue CLI 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置，支持热更新，有 webpack-dev-server 的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

1.2、vue脚手架的安装前提？

1.2.1、node安装下载

vue脚手架用于快速搭建Vue开发环境以及对应的webpack配置，webpack又依赖 node环境，所以我们当然需要安装 node。

下载node软件并安装，下载地址 选择自己电脑相应的版本，然后点击下一步下一步安装就行。如果觉得node下载太慢了，也可以使用淘宝镜像，详情点击。

1.2.2、webpack安装

安装命令，打开cmd并输入npm i webpack -g

二、安装Vue-cli

这里推荐安装 Vue cli3 版本，如果想要用 Vue cli2 版本再拉取 2.x模板即可。但是我们如果先安装了Vue cli2版本，就没有办法上拉Vue cli3 版本。安装如下

2.1、安装Vue cli3 版本

打开 cmd 并输入 npm install -g @vue/cli

2.2、拉取Vue cli2 版本

在我们安装了 Vue cli3 版本前提下，打开 cmd 并输入 npm install @vue/cli-init

三、创建Vue-cli2项目

3.1、创建项目

1、首先找到我们要创建项目的目录，并打开cmd 输入 vue init webpack 项目名
2、根据命令提升初始化项目，具体如下

此时，Vue-cli2就好帮我们自动创建一个文件夹，并快速搭建Vue开发环境以及对应的webpack配置。

3.2、Vue-cli2 版本项目结构讲解

打开我们之前创建的Vue-cli2项目，我们可以看到如下目录

文件的详细作用请看下方

注意：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- assets // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等，这里的文件打包时不会被编
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.