Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件

前情回顾

在上一篇文章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（六）将接口用 webpack 代理到本地》中，我们顺利的将接口代理到了本地。需要说明的是， cnodejs.org 的这套接口是没有跨域问题的，也就是说，本来我们是不需要代理到本地的。但是我们在实际的工作开发中，接口基本上是有跨域问题的，所以我们需要利用代理的方式来解决问题。

在前面的数篇文章中，我们做了很多的工作，又是干这个，又是干那个的，但一直没有切入到正题，那就是我们要做的工作呢，我们要开发的代码呢。这一篇博文开始，我们要来开发代码了。

什么是 *.vue 文件

首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。

*.vue 文件，是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue文件包含三种类型的顶级语言块