该系列作为vue的入门教程，从项目结构、项目加载过程、首页、列表页面等一步步实例分析，带大家对vue有个基本认识，减少入门的时间； 本文介绍利用vue实现首页和列表功能。
工具/原料
SublimeText
Chrome浏览器调试
首页功能
1、 笪瞵岔语 在App.vue添加了<router-view/>，所以启动项目的时候，会跳到sr艘早祓胂c/router下的index.js，代码如下图，主要用来配置页面的路径，用于跳转；默认显示home.vue作为首页。 Tips：使用两种引入组件的方法，一种是import，一开始就引入；一种是component:resolve=>require(['../pages/home'],resolve)，访问到这个页面的时候才会去加载相关资源，可根据项目情况进行选择。
2、 首页组件home，代码如下图（主要介绍核心代码）： 1.加载前created，先把goods.json里面的数据进行赋值this.items=list.goods； 2.template模块顶部引用子组件HomeHeader，用于显示头部标题，头部都是共用，只是参数化标题；内容区域引用子组件list，该组件循环获取数组items的值，并把price\title\img传值给子组件。
3、 头部组件homeHeader，代码如下图，功能比较简单，主要就是接收父组件传来的参数值title，进行头部显示。
4、 笪瞵岔语 内容组件goodsList，代码如下图（主要介绍核心代码）： 1.功能也比较简单，主要是接收阢衡钫王父组件的参数值'price','title','img'，然后进行循环显示；每条数据增加一个点击跳转功能router-link，现在只是用于测试，所以都是跳到同一个详情页，现实项目中应根据ID进行跳转到对应的详情页； 2.价格price加了过滤器dCurrency和保留两位小数dTofixed，代码如图3，可根据需要加在全部或者组件里面。
列表功能
1、 列表组件list，代码如下图（主要介绍核心代码）： 1.加载页面时候mounted调用方法getData，getData利用$http调用接口获取前10条数据，详细可查看代码，有详细备注；然后对滚动scroll进行监听（由于在PC端调试，所以监听滚动，手机端需要自己重写），每次滚到到底增加10条数据，详细可查看代码，有详细备注； 2.退出页面destroyed销毁滚动scroll的监听，不然会导致其他页面会有滚动效果； 3.template模板就一个头部组件和一个循环显示数据。
2、 列表组件中引用了一个自定义$toast，这个是弹出框功能，由于其他页面也会用到，所以定义成全局，方便页面调用，代码如下图（代码已有详细备注），显示效果就一个加载gif和一段说明信息。
其他功能
1、 图+文字列表和表单页面，类似上面的形式，这里不做多余分析。