【源码】基于Vue的购物商城系统

项目简介

本项目是基于Vue框架构建的购物商城系统。集成了Mint - UI、MUI等组件库，运用vue - router进行路由管理，借助vuex实现公共数据管理。系统具备商品展示、新闻资讯、图片分享等多个功能模块，还实现了购物车数据的持久化存储。

项目的主要特性和功能

1. 多页面展示：涵盖首页、新闻资讯页、图片分享页、商品详情页、购物车页等，满足用户多样浏览需求。
2. 数据交互：使用vue - resource获取和提交数据，可从后端获取新闻资讯、商品信息等，还能提交用户评论数据。
3. 组件化开发：将公共部分封装为轮播图、评论子、按钮等组件，提高代码复用性与可维护性。
4. 路由管理：通过vue - router实现页面跳转与路由高亮显示，提升导航体验。
5. 状态管理：利用vuex管理购物车等公共数据，便于组件间数据共享与修改。
6. 页面特效：实现轮播图、滑动条、图片懒加载、缩略图等特效，增强视觉体验。

安装使用步骤

安装依赖

在项目根目录下，运行以下命令安装项目所需的依赖包： bash npm install

全局安装必要工具

需要全局安装webpack - cli和webpack，否则无法使用webpack指令： bash npm install webpack-cli -g npm install webpack -g

打包项目

可以使用以下命令进行打包，也可以在package.json中配置dev和build的脚本，然后运行npm run dev或npm run build： bash webpack --mode development webpack --mode production

运行项目

在package.json的dev脚本中添加--host指令，并将当前电脑的WIFI IP地址设置为其值，然后运行以下命令启动项目： bash npm run dev 注意：手机需和开发项目的电脑处于同一WIFI环境，才能进行预览和测试。

可能遇到的问题及解决办法

1. npm run报错：项目所在路径不能有中文；若webpack和webpack - dev - server版本不兼容，可卸载并安装指定版本： bash cnpm uninstall webpack -g cnpm uninstall -g webpack - dev - server cnpm install webpack@3.8.0 --save - dev cnpm install webpack - dev - server@2.9.7 --save - dev
2. 滑动条无法正常触发滑动：导入mui.js并在mounted钩子函数中初始化： javascript mui('.mui - scroll - wrapper').scroll({ deceleration: 0.0005 })
3. 严格模式冲突：使用babel - plugin - transform - remove - strict - mode插件移除webpack打包时的严格模式。
4. 触摸事件问题：在css中添加* { touch - action: pan - y; }解决触摸事件问题。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】