蜂窝商城系统前端

1、介绍：

根据 GitHub 上的 newbee-mall 项目，这是一套前台商城系统，基于 Vue3 及相关技术栈开发，包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。

线上预览地址： http://mall.newbee.ltd ，账号可自行注册

2、系统架构

基于 vue.js 框架开发，使用 yarn 构建项目...细节太多了

3、项目结构介绍

public：公共文件夹，存放ico图标和首页

src：主目录

• assets：资产文件夹，存放logo商标版权有关的
• common：存放脚本文件，js和css等等
• components：主要存放可重复利用的组件
• router：路由管理，设置优先级等等
• service：服务端，配置动态路由、接口等等
• utils：存放可重复利用的方法，这里配置了拦截器
• views：视图层，具体显示的页面
• App.vue：全局配置，这里配置的是全局动画过渡效果
• main.js：主文件，配置组件渲染，全局引入，这里配置了过滤器

static-files：静态资源文件夹，主要存放图片

babel.config.js：代码规范检查配置文件

package.json：主要配置文件，启动项，依赖模块，组件设置等等

4、使用说明

• 拉下项目后用适合的 IDE 编辑器打开，首先运行yarn isntall，接着运行yarn serve，不出意外的话应该如图所示：

  

5、前台商城页面

• 首页1

• 首页2

• 商品搜索

• 购物车

• 订单结算

• 支付页面