一个页面是一个组件。页面可能分几部分，例如下图可以分为header，swiper， icons，recommend四部分。
Home页
因此Home页可以分为四个部分来完成，每一个部分是一个组件。通过将四个组件引入Home页来完成功能的实现。
页面目录
在Home页中引入组件分为以下几步：
①在<script>代码逻辑区域import组件的路径。
路径的表示方式：
./是当前目录
../是父级目录
/是根目录
②在<script>代码逻辑区域的components里声明import的各个组件。
③在<template>代码模板区域内使用组件。注意组件名和组件使用时的变更写法。
eg:HomeHeader--> home-header
<template>
<div>
<home-header></home-header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-icons :iconList="iconList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
</div>
</template>
<script>
import HomeHeader from './Home/components/Header'
import HomeSwiper from './Home/components/Swiper'
import HomeIcons from './Home/components/Icons'
import HomeRecommend from './Home/components/Recommend'
export default{
name: 'Home',
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend
},
}
</script>
在编写代码的过程中，我们会发现，有些组件不仅仅会被一个组件调用，可能很多组件中都会用到它。那么，在这种情况下，我们最好把这个组件写成一个公用组件，另起一个独立的文件夹存放，以方便被调用。
