说明：默认我们已经用vue-cli（vue脚手架或称前端自动化构建工具）创建好项目了
一、 项目说明
ps：这个简单小项目只提供一个小小小的骨架，需要向“它”身上具体加多少“肉”，需要大家考虑好功能和布局后进行完善。
1.首先看下主页效果：如下图
主页分析：大体上分为上（header）、中（body或content）、下（footer）三部分，中间body部分是由若干个相同的li组成的“列表”，所以我们可将li定义为一个组件。
2.再来看下商品详情页：如下图
详情页分析：也分为上、中、下三部分。
分析后是不是觉得so easy呢！很好那么我们就一起来搞一下！！
二、 配置目录文件
在src文件夹（也就是我们码农主要工作区）下，创建assets文件夹（用来保存项目所需图片）、components（存组件commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue）、pages（存页面goodsDetail.vue、home.vue）和main.js文件。详情请看下图：
ps: 1.具体文件夹以及文件名称可根据自己项目进行“自拟”。 2.这里的每一个*.vue文件都是一个组件。
三、配置相关接口
主页商品信息及图片， 是从服务器端返回的json数据，不可能所以商品都“写死”。故这里需要模拟后台建立了一个数据文件。在根目录下建立一个goods.json文件用来放“伪数据”，如下图：
注意：下面的注释不要复制进去。否则可能会报错。
数据文件创建完成后，就需要写一个接口了，在build文件夹下dev-server.js文件进行配置。如图：
- 注意
本文是在vue-cli为2.8.1的时候编写。最近很多小伙伴vue -V版本为2.9.1找不到derver.js文件。。现已提供两种解决方案以便参考
简单说明：
- 需要在var app = express() 代码下写新增代码,，因通过接口获取数据依赖与express() 对象下方法；
- 用require引入模拟数据的文件；
- 用express对象下的Router方法来指定入口在哪。
- 对进入“入口”的obj，返回相关数据。
测试是否该数据可用，在浏览器地址栏中输入：http://localhost:8090/api/goods ，此处因为本人PC的8080端口有冲突所以改成端口8090。在浏览器中展示出如下图数据，代码数据数取成功：
四、编写页面代码
1. 页面入口index.html：
知识点：
- 定义挂载Vue实例的对象“#app”；
- 必须定义数据战术区域，这里用<router-view></router-view>标签展示组件或模版；
- 根据不同设备分辨率改变根字体大小从而达到终端适配。
- 2. 主要模版home.vue：这个是来展示数据的，并通过vue的路由展示到index.html。
因为home.vue用到了三个组件，所以我们就先编写下这几个组件
a). homeHeader.vue：和之前说的一样，在template标签里写html代码，style标签里写css代码，script标签里写js代码
知识点：<style></style>属性可进行配置，scoped表此样式只在当前页面有效。lang="xxx"支持less/sass语法规则。
- b). commonFooter.vue：
说明：定义一个footer并定位到页面的底部，在ul内写4个li来模拟按钮。
c). list.vue：这个组件用来展示每个商品列表信息
知识点：
1. 类似a标签功能的<router-link to="/detail"></router-link>标签，来规定发生点击事件后需要跳转的地址。
2. :src="img" 中的img是来自父组件的数据，这里用到了父组件向子组件传递数据。props对象在后续的深入学习中会详细解释。
3.
4. {{ xxx }} 模版展示数据，也可用v-text='xxx'，v-html='xxx'来展示数据。后者是防止当网速超慢时，用户会看到大花括号。
5. {{ xxx|aa|bb }}模版展示数据+过滤器，过滤器顾名思义就是对展示的数据加以过滤，例如这里的是加个符号并保留两位小数。
6. props
