基于vue框架Vant UI组件库移动端电商网站webapp项目总结

项目总结

一、项目名称

电商网站webapp开发

二、技术栈

框架：vue框架
UI组件：Vant移动端Vue组件库
    安装：npm install vant -S
    项目中引用的部分组件：
    1、Tabbar标签栏：封装成底部标签栏，引入到其他组件中，导入路由，在底部作为导航栏使用；
    2、Sidebar,SidebarItem 侧边导航：在商品分类展示模块中引入，按照后台系统中的商品分类进行展示，完成商品筛选分类展示模块；
    3、Grid,GridItem 宫格：在首页及个人中心页中使用，添加一些功能设置导引，点击宫格实现特定功能，如钱包，收藏等；
    4、Image 图片：用于商品图片展示；
    5、SwipeCell 滑动单元格，Card 卡片：滑动单元格引用在订单，购物车商品展示，结合Card(卡片使用)，展示商品的图片、名称、描述信息、价格、数量等信息；
    6、Button 按钮：用于项目中事件的触发及url的跳转等功能；
    7、Checkbox,CheckboxGroup 复选框：用于实现订单模块中商品的勾选提交，实现选择指定商品的功能；
    8、Col, Row 栅格布局：本项目采用的主要布局方式，将页面宽度分为24格，通过span设置所占宽度，row设置所在行，帮助页面实现布局；
    9、SubmitBar 提交订单栏：对订单提交模块进行结构优化；
    10、Toast 轻提示：在进行一些操作（如删除商品，退出登录等）时，弹出轻提示框，再次确认是否执行该操作；
    11、NoticeBar 通知栏：用于循环播放展示一组消息通知；
    12、Search 搜索：搜索框组件，实现搜索栏布局结构的搭建；
    13、Swi