Vue的组件化思想
一个组件就是一个模块，每个模块都是独立的。组件化这个特点可以把一个网站甚至一个页面分成一个一个的小模块（即组件）。每个组件也是完整的，他包含整个组件需要的业务逻辑和样式。每个组件都可以很方便实现复用，很方便的维护。
例如：
上次创建Vue项目，运行以后显示：
F12 -> Elements板块 可以看到当前页面的元素标签组成：
再看当前项目的文件目录。其实这个页面并不是完全由一个页面呈现出来的。可以体现出Vue的组件化思想。
看当前目录下的三个文件：index.html,src下的App.vue,src下的components下的HelloWorld.vue。所以这三个文件的关系---
App.vue是嵌在index.html里的，App.vue调用了HelloWorld.vue：
index.html文件是最外层框架。里面没有任何的实质性内容。只有一个<head>和一个只载入了app的vue module 的<body>。
vue文件的模式就如App.vue，文件组成由这三部分组成：<template></template>用来写html模板。<script></script>用来写数据和函数。<style></style>用来写css样式。
现在我们只需看<template>部分。包含一个图片<img>,还有一个<router-view>。所以App.vue是通过<router-view>来调用HelloWorld.vue的。如何调用过来的呢？
打开src下的router下的index.js:
可以看出这个router下的index.js文件的路由是对应App.vue文件的<router-view>来显示相应的内容。
为了更深的理解，可以打开运行的页面，把路由改为http://localhost:8080/#/HelloWorld，可以看到页面只有一个图片。
其实后面的HelloWorld不管改为任何，都只出现一个图片，因为router下的index.js的路由没有相应的设置。
若这样写：
运行出来的页面，路由改为http://localhost:8080/#/HelloWorld，显示便为：
所以以后我们在写vue项目时不需要修改index.html里的内容。我们只需要修改App.vue和router里的index.js的路由设置，以及增加一些我们需要的component文件。
可以通过这个小案例更加理解：Vue的第一个小案例
