项目已经上传github:项目github地址
1.项目介绍
本项目主要是利用vuejs实现一个产品售卖的平台。
vuejs的重要思想之一就是组件化，在本项目中也将不同的小模块进行组件化，这样可以重复利用一些模块，复用代码，减少代码的冗余。
利用vue-router实现不同页面之间的跳转。
利用vue-resource从本地获取数据。
主要界面如下：
1.首页
2.产品售卖页
3.支付状态确认页面
4.订单列表页
5.用户登录界面
2.项目涉及知识点
怎么样定义一个组件？
1.写好一个组件的模板；
2.在父组件中用import引入该子组件；
3.在父组件的components中加入该子组件；
4.在父组件中写入子组件标签，即可。
父组件与子组件之间怎么传递信息？
父组件—>子组件：props
子组件—>父组件：事件
3.项目文件结构
1.所有页面放在pages目录中，pages目录中包括3个主要界面：index、detail、orderList和一个detail文件夹。detail文件夹中包括四个不同产品对应的页面：count(数据统计)、forecast（数据预测）、analysis（流量分析）、publish（广告发布）。
2.所有的组件都放在components目录下，components目录中包括：bankChooser（银行选择）、checkOrder（支付状态检查）、layout（头部底部框架）、logForm（登录组件）、regForm（注册组件）、slideShow（轮播图）等组件，和一个base文件夹。该文件夹下存放的是一些基本的组件：counter（选择产品数量）、selection（下拉选择）、chooser（单选）、multiplyChooser（多选）、dialog（对话框）、datepicker（选择日期）。
4.主要文件介绍
1.main.js文件中 引入资源 比如vue-router、vue-resource，并且定义了vue-router的路径、页面等。每一个路径主要包括：path、component、redirect、children等。
2.框架layout文件：定义页面的头部和尾部，中间部分是IndexPage。
头部包括一个图片，点击该图片可以直接跳转到首页。还包括登录、注册和关于链接，点击该链接跳出对应的对话框。为了实现复用，对话框写成单独的组件，对话框有动画效果，通过on-close事件向父组件传递信息。
3.登录界面中，输入用户名和密码，系统会对用户名和密码的格式进行验证。如果格式不正确，则弹出提示信息；如果用户名和密码的格式均正确，通过从vue-resource从本地获取的用户名信息，登录成功。首页头部
显示用户名和退出链接。登录界面和注册界面，通过has-log事件向父组件传递信息。
4.index文件：index.vue文件实现的是首页的中间内容。index页面的左边是导航栏，点击不同的链接，可以跳转。其中最新消息一栏是通过从vue-resource从本地获取的信息，并将最新消息的标题显示出来。
index页面的右边：上面是一个轮播图，轮播图单独写成一个组件。
下面是产品列表，其中有不同按钮，点击可以进入不用产品的详细页面。
5.detail页面：detail页面中有四个子路由，分别是count、forecast、analysis、publish。detail页面的左边是导航栏，对应不同产品。右边则是不同子路由对应的页面。
6.以analysis页面为例：里面插入了chooser、multiplyChooser、selection、counter组件，用来选择产品的一些参数，比如产品类型、产品版本、有效时间、购买数量等。dialog、bankChooser、checkOrder等组件用来设计一些弹出的对话框，目的是让用户支付并确定支付状态。
7.在analysis页面中，在选择好产品参数之后，点击立即购买，会出现一个对话框。对话框里有一个表格，记录了用户所选择的产品参数；还有一个银行选择组件，可以点击选择不同的银行支付。
8.之后，点击“确认购买”的按钮，跳出“检查支付状态”的对话框。该对话框中有“支付成功”和“支付失败”两个按钮，点击不同的按钮，弹出不同的对话框，显示不同的提示信息。在关闭该提示对话框之后，自动跳转到orderList页面。
9.在orderList页面中，可以根据不同的选项来显示订单信息，比如：不同产品、开始时间、结束时间、关键字。其中在开始时间和结束时间的选择方面，我们运用了一个组件。另外，用户还可以通过点击表格的表头，系统会根据表头信息对订单进行重排序。
10.项目中的一些数据，比如最新消息和订单列表都是通过vue-resource在本地文件中获取的，目的是模拟实际开发中从后台获取数据。另外利用vue-router进行路由跳转的一些操作应用得也比较多。