vue-cli是一个Vue.js开发的可以快速创建工程化项目的标准工具，我们在创建Vue项目时就不需要自己手动配置webpack了，所以说vue-cli简化了我们基于webpack创建工程化的Vue项目的过程
不过在之前我们需要了解一下什么是单页面应用程序：
单页面程序（Single Page Application），简称SPA
它指的是一个Web网站中只有唯一的一个HTML页面，所有的功能于交互都在这个唯一的HTML页面内完成，单页面应用程序的搭建就需要用到vue-cli
目录
安装配置了解vue-cli一条龙
首先第一步，我们需要安装vue-cli(需要下载为全局包)：
npm i -g @vue/cli
我们可以运行终端命令来查看是否安装完成：
vue -V
安装好之后我们废话不多说，直接快速生成一个工程化Vue项目：
vue create 项目名称这时并不会立马创建好，会让你选择一些你需要的配置项：
我们就选第三项自定义配置文件，接下来我们需要选择具体需要哪些配置项：
然后我们选择自己所搭建的vue项目版本以及哪个CSS预处理器，选择好之后我们再选择一下插件的配置文件存放位置：
然后他会告诉我们应该怎么运行这个项目：
#切换到项目文件根目录
cd 项目文件名
#运行起来
npm run serve完成之后我们美美的打开他给我们开启的本地服务器端口：
看到这个页面，就代表我们一切都成功了
这样一个Vue工程化项目就搭建完成了
快开始玩起来吧
我们来看一下都有哪些文件，插件的配置文件就不用说了，还有一个md格式的说明文件，git所需要的.gitignore文件
node_modules文件夹里面不用多说，存放着很多很多的第三方包
public文件夹下存放着我们的主页面index.html以及一张ico格式的vue的logo图片
src目录下存放着：
1.assets：存放项目中用到的静态文件，比如图片以及css样式表等
2.components：我们自己封装出来的可复用组件都需要放在这个文件夹下
3.main.js：项目入口文件，整个项目的执行过程会先去执行main.js文件，根据读取它的文件，得知该怎么去运行项目或者说去运行哪些项目文件
4.App.vue：项目根组件，是用来定义UI结构的，是编写待渲染的模板结构的文件
了解Vue项目运行流程
通过以上文件的了解，我们应该不难理解到vue项目的运行流程：
vue会先通过main.js文件把App.vue的模板文件渲染到index.html指定的区域中（<div id="app"><div>）
我们打开main.js文件之后发现无非就是导入了一个vue的包，来得到一个vue构造函数；
还有渲染页面的.vue模块模板文件；
创建了一个Vue实例对象，使用里面的 render属性使用函数的方法来指定哪个组件渲染到页面上；
那么最后一个.$mount('#app')是干什么的？
其实我们看到#app就大体猜到了：
没错---就是用来替代el的，$.mount('#app')也是Vue实例上的一个方法，我们在Vue实例中使用el，不使用$.mount('#app')也是可以的
