该项目是通过 Vue-Cli 搭建 Vue2 全家桶，组件库使用element-ui，css预处理器使用less，其他到插件和库有：lodash、echarts、axios、vue-json-excel、vuex-persistedstate、dayjs、moment.js、wangEditor、vue-pdf；另外通过 Vue Route 实现了各个页面的路由和参数配置。
1、默认只有登录页的路由，只有成功登录后从后端获取到token才能获取其他页面的路由权限，这个步骤在路由守卫中进行判断和实现
2、“首页”实现了页面数据展示，中间 Echarts 图表数据展示，下方的卡片数据展示以及一些快捷入口；该页面所有数据都是通过 axois 从后端提供的接口获得
3、“产品管理”分别由“产品列表”、“产品信息”和“产品分类”组成
(1)产品列表
a、通过使用 的 Form 表单组件 和 Table 表格组件实现了商品信息展示和查询；
b、配合 Pagination 组件实现了商品信息列表分类展示，通过 axois 从后端接口按照页码获取每页的信息；
c、点击页面上方的 “添加商品” Button 同样通过路由实现跳转到 “产品信息”页面(序号(2)中会具体说明)
d、鼠标悬浮 “商品名称” 可显示 Popover 展示商品图片，点击 “商品名称” 可通过路由跳转到
e、点击每行信息中的 “删除”按钮 可配合 axois 调用后端接口 实现 “删除” 商品信息的功能 “产品信息”页面
f、点击每行信息中的 “编辑”按钮 可通过路由将页面跳转到 “产品信息” 页面，此过程通过vuex对商品信息进行存储，并在“产品信息”页面进行展示以便用户编辑
g、上方表单可通过“商品名称”和“添加时间”来查询商品信息，通过 axois 从后端请求结果，将查询结果展示到页面下方的表单中
(2)产品信息
a、页面左侧使用 Tree 组件展示可选择的商品类型，并通过懒加载的方式获取二级分类，获取方式是通过 axois 从后端的api请求获得
b、页面由侧使用 Form 表单组件对商品信息进行展示可对商品的基本信息进行进行编辑
c、使用了 Upload 组件(进行了二次封装)实现图片的上传操作
d、使用了 wangEditor 组件(进行了二次封装)实现富文本的编辑
e、使用了 vuex 的 createPersistedState 保持化插件对应页面数据保持话的处理，防止页面刷新时页面数据和状态的丢失
f、在其他页面跳转到 “商品信息” 页面时，通过识别路由跳转前传入路由中的 params 对象中的属性值从而实现页面的相应变化和操作权限的变化，以此来区分“添加”、“编辑”和“查看”三种模式
(3)产品分类：页面主要功能是对“商品类别”进行编辑操作，主体内容使用 Tree 组件进行展示，通过后端提供的接口进行增删改查操作
3、“订单管理”分别由“订单列表”、“订单清单”和“订单合同”组成
(1)订单列表
a、页面基本结构与“商品列表”类似，同样使用Form表单组件和Table表格组件来对订单信息进行展示，区别在于将上方的两个按钮的功能不同
b、上方的 “订单汇总”按钮 用于将下方表单选中的订单进行汇总，通过 axois 发送请求返回后端，如果选中订单数量小于2则会弹出窗口提示
c、上方的 “导出”按钮 可将选中的订单信息通过vue-json-excel插件以excel文档格式导出；逻辑方面，如果用户勾选了订单信息，则只导出所勾选的信息，如果未勾选，则默认导出全部信息
d、点击“订单编号”还能从呼出Drawer抽屉组件来显示详细的订单信息；抽屉组件中上方通过Form表单展示订单基本信息，中间通过Table表格组件展示详细的商品信息，下方则是订单审核相关的信息，点击下方关闭按钮或右上角关闭按钮可收起抽屉组件
(2)汇总清单：页面结构与与“订单列表”页面保持一致，上方“导出”按钮用于导出汇总清单信息，以及信息条目中的“撤销汇总”按钮用于进行汇总撤销
(3)订单审核：用于查看和打印订单合同，合同pdf的展示是使用的对vue-pdf组件二次封装后的组件，可实现分页预览和打印功能
4、“广告分类”由“广告列表”组成，“广告列表”包含左侧分类列表由Tree组件实现，通过与后端交互进行分类的增删改查；右侧根据所在广告分类不同显示不同的广告列表，同时支持新增和删除广告