我的第一个vue-pos项目总结：

       跟着网上的免费教程技术胖写的，用到的主要是vue-cli、element-ui、axios（接口不通），项目非常简单。初始化样式要写到index.html中，在app.vue主界面中注册个组件，来画左边的功能菜单组件，组件是自己画出来的，router-view可以自己包裹个div对div进行布局。在router中配置根目录匹配的路由，来画右边的功能部分。路由模板已经匹配好了，直接在相应的组件中进行布局。布局要用到element-ui提供的标签。el-row表示行，el-col表示列，:span=”24”表示将一行平均分成24等分，分为7+14的布局，7的部分放一个tabs标签页，写三个tab-pane（窗格）每一个tab-pane放一个table（表格），表格放四个table-column（列），只需要将table属性绑定:data=”对象数组”，下面的column就可以绑定props直接显示data中的数据。

然后进行最右侧的布局。上面进行普通布局即可，下面写一个tabs（标签页），写诺干个tab-pane（窗格）用于放类别。在每个tab-pane中放ul和几个li放商品。数据都是渲染出来的。在data中声明一个数组，用于接收数组对象。在钩子函数created中用axios请求服务器端的数据。axios.get(url地址).then(function(){}).catch(function(){})

将请求回来的数据赋给data中的数组即可用。

下面开始写业务逻辑，鼠标点击最右侧的商品，自动添加到购物车中。给li绑定点击事件，都是在遍历的时候添加的。点击的时候传入对应的li里的数据对象，在methods中遍历购物车中的所有数据，判断购物车中是否已经存在这个数据对象中的商品id，如果存在，找出这个对象，用arr.filter(function(){})过滤出来，并把count加一。如果不存在，则创建一个购物车的的对象的形式，count设为1，push进去。

在操作中设置增加和删除：@click="addOrderList(scope.row)"(element提供的写法)，删除：将不是商品id的对象过滤出来重新赋给一个数组。

汇总数量和价格，将这个方法独立定义出来，因为每次增加和删除都会调用。先将总数量和总价格清零，然后遍历整个数组，将所有的count加到一起。将count*price加总到总价上。

清空：将购物车的数组清零，将总数量和总价格清零。