利用vue实现网站基本功能-首页和列表

　　该系列作为vue的入门教程，从项目结构、项目加载过程、首页、列表页面等一步步实例分析，带大家对vue有个基本认识，减少入门的时间；　　本文介绍利用vue实现首页和列表功能。

工具/原料

Sublime Text

Chrome浏览器调试

首页功能

1、　　在App.vue添加了<router-view/>，所以启动项目的时候，会跳到sr艘早祓胂c/router下的index.js，代码如下图，主要用来配置页面的路径，用于跳转；默认显示home.vue作为首页。　　Tips：使用两种引入组件的方法，一种是import，一开始就引入；一种是component: resolve => require(['../pages/home'], resolve)，访问到这个页面的时候才会去加载相关资源，可根据项目情况进行选择。

4、　　内容组件goodsList，代码如下图（主要介绍核心代码）：　　1.功能也比较简单，主要是接收父组件的参数值'price', 'title', 'img'，然后进行循环显示；每条数据增加一个点击跳转功能router-link，现在只是用于测试，所以都是跳到同一个详情页，现实项目中应根据ID进行跳转到对应的详情页；　　2.价格price加了过滤器dCurrency和保留两位小数dTofixed，代码如图3，可根据需要加在全部或者组件里面。

2、　　列表组件中引用了一个自定义$toast，这个是弹出框功能，由于其他页面也会用到，所以定义成全局，方便页面调用，代码如下图（代码已有详细备注），显示效果就一个加载gif和一段说明信息。

其他功能

1、　　图+文字列表和表单页面，类似上面的形式，这里不做多余分析。