智慧商城项目来自黑马程序员2023 VUE2课程中期的实战项目。该项目采用Vue2+vant-ui开发框架，业务上包含完整的电商购物业务流程。技术上覆盖了移动端vw适配，request请求方法封装，storage储存模块封装，请求响应拦截器，嵌套路由配置，路由导航，路由跳转传参，vuex分模块管理数据，项目打包&优化等内容。该项目全面覆盖了VUE2的技术点。
再查看时必须使用手机端样式查看，或用电脑端的检查功能查看
⬇⬇⬇⬇⬇ 点击下面链接，进入案例展示
接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080
演示地址：http://cba.itlike.com/public/mweb/#/
代码地址：https://gitee.com/WYJ15487563/smart-mall-vue
部署地址：http://123.56.76.128:8084
| 关键技术 | 详细分析 |
| Vw适配 | vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。vw可以轻松搞定弹性布局，流体布局。 移动端适配vw方案 |
| Vant-ui | Vant 是赞前端团队维护的移动端组件库，提供了一整套 UI 基础组件和业务组件。轻量、可靠的移动端 Vue 组件库，采用 MIT 开源协议, 是有赞的一套开源组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 60+ 个组件，这些组件被广泛使用于有赞的各个移动端业务中。vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。 介绍 - Vant-ui |
| Vue2（Vue-router、Vuex） | Vue2是一个经过长时间发展和测试的成熟版本，广泛应用于各种项目中。 生态系统丰富 ：由于Vue2的流行程度，它的生态系统相对较为完善，有大量的插件和组件可供使用。Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) Vue-router是Vue.js 的官方路由为 Vue.js 提供富有表现力、可配置的、方便的路由Vue Router | Vue.js 的官方路由 (vuejs.org) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。开始 | Vuex (vuejs.org) |
| Axios封装 | Axios 是一个 基于 promise 的 HTTP 客户端，适用于 node.js 和浏览器。它是 同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js http模块Axios中文文档 | Axios中文网 (axios-http.cn) |
| request请求方法封装 | Vue2中封装request请求可以使用axios库，axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js中，支持拦截器、取消请求等vue的封装request接口(详细)_vue-request-CSDN博客 |
| 嵌套路由配置 | 嵌套路由是一种比较常见的路由设计方式。顾名思义，它是指在一个路由中嵌套了另外一个路由，从而形成了多层嵌套的路由结构。这种路由结构通常用于实现页面布局或者子页面等需求，例如展示一个包含侧边栏、头部、底部和主区域的整体页面，在主区域中嵌套了多个子页面。嵌套路由 | Vue Router (vuejs.org) |
| 项目打包&优化 | 使用npm run build进行打包，打包后方便部署服务器等后续操作Vue项目的打包方式（生成dist文件）_vue打包dist-CSDN博客 |
用户功能流程图：
