Vue项目总结

项目总结

搭建项目

创建项目

使用脚手架vue-cli快速搭建，首先全局安装vue-cli可以使用npm，yarn，cnpm等，我的项目用的是npm具体过程不再赘述，虽然vue更新到3版本了，但本项目仍使用的vue2

项目为单页面应用，所有页面全部依靠路由跳转，需要安装vue-router，vue Router是vue官方的路由管理器功能强大让构建单页面应用变的易如反掌，但是在创建项目时vue-cli自动安装了，安装过程这里也同样不过多赘述

配置路由

vue的路由是一种前端路由，有两种实现方式：hash模式和history模式，两者主要区别是hash模式在路径中携带#，本项目使用history模式，

首先引入vue，vue-router和需要直接加载的组件（不需要直接加载的使用路由懒加载不需要引入），之后挂载vue-router

然后书写路由组件规则，主要的内容是各个路由的路径，名称，指向的组件以及嵌套路由和某些根组件的重定向，并且可以配置meta对象实现隐藏底部等等的功能

路由重定向：

使不同的地址显示同一个页面

配置404页面：

当没有对应地址匹配的路由时，确保应用正常

最后并将书写的路由规则、路由模式mode和base作为全局变量router输出。

页面底部导航

底部导航使用Tabbar 标签栏组件，需要注意的是，有的页面是不需要底部导航栏的，解决这个问题有两种方式

方式一

在router配置meta配合tabbar组件v-if实现显示隐藏

方式二

将底部导航抽离成一个公共组件，使用命名视图让需要底部导航的页面加入该组件

vant组件库

Vant 是一个开源的移动端组件库,我们要大量使用其中的组件

第一步需要安装vantui库

第二步配置ui库

第三步还需要修改babel.config.js中 的配置（修改完之后重新启动项目）

首页

首页包含的结构：搜索框，轮播图，秒杀，商品列表，还包括下拉刷新和上拉加载功能,返回顶部功能

上拉加载功能

使用List 列表组件，需要注意的点：想要刷新什么就包裹什么，并且还要有一个finished属性，当没有下一页时finished为true时停止加载下一页

下拉刷新功能

将整个content包裹，需要注意的是刷新之后要将page设为2，finished设为false

返回顶部功能

给content绑定ref，在mounted中绑定scroll事件

搜索框

首页的搜索框

首页的搜索框实际上并不是真的搜索框，可以看作一个长的像搜索框的按钮，点击的时候跳转到搜索页

首页的搜索框还包含左右边的内容，具体情况具体分析，我这里用的是两个icon图标，左边跳转kind分类页，右边是登陆，如果已登陆显示“我的”图标，点击跳转user页面，登陆功能后面再说

实现切换“我的”和登陆

在登陆时将“登陆了”这一状态保存到localstorage中，然后同样配合v-if实现显隐样式，其中这一过程有两种方式一种是直接通过计算属性另一种也是使用计算属性，还要使用mapstore辅助函数，这一方式同样后面再说

搜索页面

当点击首页搜索框时跳转到搜索页面，搜索页面需要包含三个结构，头部导航，最近搜索和热门搜索，

头部导航和首页导航类似，左边是“<”后退，右边是搜索按钮，然后中间是输入框，当点击搜索按钮时要携带输入到内容跳转到搜索内容页面，并且当搜索框为空时，不要跳转

最近搜索，将每次搜索到内容保存到localstorage中，将localstorage中的内容显示前10条左右

热门搜索需要对应接口，拿到数据

搜索内容页

搜索内容页同样需要搜索框还要包括各种排序方式和商品列表，需要搜索search接口

一进入页面，触发mounted，拿到route的keyword调用search接口，调用成功之后拿到数据，并将该词条放到localstorage中的一个数组中，并放到数组的最前边

搜索

搜索框结构和搜索页完全相同，但是逻辑不同，我们需要再之前的基础上添加watch监控属性，当我们输入的内容改变的时候能够再次出现对应的搜索内容

watch的逻辑：watch监控¥route，当搜索框内容改变时通过newval拿到改变之后的输入内容，调用serach接口，逻辑和mounted的一致

排序

排序有很多种方式，这里暂且只说一下我使用的排序方式

首先是价格排序，这一筛选方式包括默认排序，价格升序，和价格降序，结构使用vant的DropdownMenu 下拉菜单组件，使用change事件，当我们选中默认排序时直接使用mounted请求的数据，选中价格升序和降序时使用数组方法sort来改变顺序，这里需要注意的是排序时sort的参数a和b是一系列对象，我们需要的是对象.originprice，而watch默认情况只能拿到第一层的数据，拿到深层的数据有两种方式第一种使用deep属性深度监听，第二种方式将数据深层拷贝一份，深层拷贝也有两种方式（第二种需要使用jQuery这里就不谈了）第一种方式是使用json的stringify和parse方法先将数据转化成json格式数据再转变回对象形式

再次是销量排序方式与价格排序基本类似这里不再赘述

最后还有价格区间排序，逻辑为拿到最小值和最大值，然后将符合要求的数据加入数组，这里需要注意的是有值不写的情况，当最小值或最大值为空时，直接使用小于最大值和大于最小值的数据，而全为空时等同于默认排序

内容

内容我们使用商品卡片，以为这块内容我们要多次使用，所以把它抽离成公共组件

结构使用cart商品卡片组件，然后使用父子组件传值，将父组件传递的数据用v-for渲染，这里将渲染方式分为两种一种时一列一个商品，一种时一列两个商品，并且添加一个固定定位的图标来控制两种样式，

具体逻辑为设置两个类名，每个类名书写自己的结构，通过不同的类名设置不同的样式，而按钮图标逻辑为点击时改变数据，每个数据对应不同的类名，来控制样式，点击每一个商品时，携带上该商品的id进入商品详情页

轮播图

使用swipe组件，在mounted中请求轮播图接口数据，具体细节查看vant文档这里不再赘述，注意一点，轮播图背后的背景，画一个大圆，定位跑到中间然后水平方向的overflow设置为隐藏将多余的部分隐藏然后设置渐变色即可

秒杀列表

使用Grid 宫格组件，需要注意的是该组件有内置样式若列数过多可能样式回出现问题，那只能自己书写样式了，还有时间使用CountDown 倒计时组件

商品列表

使用搜索内容时的商品列表组件

商品详情页

详情页包含的结构：头部导航，轮播图，视频播放，商品介绍，客服，底部商品导航

头部导航

顶部导航用到好多次了，详情页的头部导航还含有气泡弹出框，将该组件包裹图标按钮，还要加入分享面板组件，点击分享时弹出各种分享方式

轮播图

结构使用swipe组件，点击时出现遮罩层，遮罩层层也要有轮播图功能，且index要和外部轮播图一致

具体逻辑为给外部轮播图绑定change事件当改变index也改变遮罩层的轮播图的index，反过来改变遮罩层index来改变外部轮播图的index vant没有相应的属性，需要自己绑定事件

视频播放

设置一个固定定位的按钮，点击出现遮罩层，需要注意的点是绑定视频refs之后，可以查看视频的时长，但该数据是不符合要求的，使用filter筛选器来改变格式

商品介绍

从接口数据中拿到信息渲染页面，很简单这里不再赘述

客服

客服功能要具体参考使用的哪一家客服，从对应官方文档中查看直接复制即可，这里只做了解

底部商品导航

使用GoodsAction 商品导航组件，需要注意的是点击加入购物车之后要弹出SubmitBar 提交订单栏组件，点击SubmitBar的加入购物车需要登陆之后才能操作

登陆注册

注册

注册需要三个页面来完成逻辑

第一个页面

输入手机号验证该手机号是否注册过，还可以添加用户协议，必须勾选才能注册

第二个页面

拿到第一步操作的验证码，验证码是否正确，还要有发送验证码按钮，该按钮一进入页面就要默认触发，当点击一次之后一段时间之内不能再次点击

第三个页面

输入密码，该密码需要符合特定的正则验证规则

登陆

注册成功之后就可以登陆了，登陆一般情况都要需要多套登陆方式，例如手机验证码登陆，扫码登陆，账号密码登陆，微信QQ登陆等等，两种登陆方式需要一个按钮来切换，具体逻辑和商品列表的逻辑基本一致，不再赘述

购物车

购物车页面需要头部导航，购物车列表，猜你喜欢，和提交订单栏

头部导航

结构不再赘述，因情况而定可以在标题后添加选中商品的数量，使用filter筛选器

购物车列表

当没有商品时要显示购物车没有商品的样式，当有商品之后才会出现购物车列表

在这之前可以添加NoticeBar 通知栏组件，购物车列表内容使用card组件，需要实现删除功能，使用swipecell滑块单元格组件，向左滑动出现删除按钮，左边添加复选框，使用分栏布局，增删操作很简单不再赘述，这里注意的是选中直接使用对应接口，直接改变商品的数据不需要进行其他操作了

猜你喜欢

猜你喜欢结构使用公共商品列表组件，使用的数据直接从购物车数据里拿

提交订单栏

特别注意的是，全选浮选框一定不能使用change事件，要使用click事件，原生js中这种情况click会慢一步，但是vue中使用v-model绑定数据不会出现这种问题，而使用change事件的话当单件商品取消选中时会改变全选状态改为为选中，之后就会把所有选中的单选框改为未选中，点击提交订单进入确认订单页，并且要携带一个该数据的时间

确认订单

确认订单页需要三个结构，顶部导航，收货地址和要购买的商品，顶部导航不谈

确认订单页面

收货地址

没有添加地址时出现“请添加收货人信息”字样，点击之后进入订单地址列表，选中地址之后改变该结构的内容

购买的商品

结构跟购物车列表类似，但是不需要增删改查等功能，提供一个查看的内容即可

订单地址列表

还是三个结构头部导航栏，地址列表，新增地址按钮

地址列表

直接使用AddressList 地址列表组件，其中需要的功能，根据情况添加

新增地址

跳转到添加订单地址页面，同样需要携带时间信息

添加订单地址

使用AddressEdit 地址编辑组件，拿到数据之后直接调用对应接口

vuex状态管理器

• 多个视图依赖于同一状态。

• 来自不同视图的行为需要变更同一状态。

时都要使用状态管理器，使用时主要包括两大类，在store中书写状态，之后， 一种在要使用的页面引入vuex，然后直接使用store的方法。第二种使用辅助函数

值得一提的事store还有一个getter属性，类似于computed计算属性

还可以分模款然后在store中挂载该模块，

之后使用的时候要加上该模块的名字即可