什么是Vue.js？

vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

什么是*.vue文件

首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

其中 <template> 和 <style> 是支持用预编译语言来写的。比如，在我们的项目中，我们就用了 scss 预编译，因此，我们是这样写的：

<style lang="scss">

html 也有自己的预编译语言， vue 也是支持的，不过一般来说，我们前端人员还是比较中意 html 原生语言，所以，我就不过多阐述了。

另外，我在 App.vue 文件中，已经用一句 @import "./style/style"; 将我们的样式给写到指定的地方去了。所以，在后面所有的我的文章中，是不会出现这个部分的内容的。所有样式，都会在 src/style/ 文件夹中对应的位置去写。我这样做的好处是，不需要重复的引入各种 scss 基础文件，并且做到了项目的样式代码的可管控。

*.vue 文件代码解析

首先，我们来简单看一下：

<template>
 <div>
 <Header></Header>
 <div class="article_list">
 <ul>
 <li></li>
 </ul>
 </div>
 <Footer></Footer>
 </div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
 components: { Header, Footer },
 data () {
 return {
 list: []
 }
 },
 created () {
 this.getData()
 },
 methods: {
 getData () {
 this.$api.get('topics', null, r => {
 console.log(r)
 })
 }
 }
}
</script>
<style>
 .article_list {margin: auto;}
</style>