Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第10章 网上商城项目实战

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第10章网上商城项目实战：Vue3与Vuex应用开发项目背景知识项目概述与需求分析技术选型与开发环境搭建商城首页开发与优化用户登录与注册功能开发商家详情与购物车功能开发项目总结02030405060701-理解Vuex状态管理及其核心概念的应用-熟练使用Vue3.0的CompositionAPI掌握Vue3.0项目的开发流程和性能优化学习分析和处理复杂业务需求的方法-掌握代码优化技巧，提升代码质量和性能0102030405E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3项目背景知识01Vuex基础与应用1.1Vuex核心概念Vuex是Vue.js的状态管理模式和库，主要用于集中管理应用的组件状态。它在大型应用中尤为重要，能够高效地管理跨组件共享的状态。Vuex仓库（Store）是其核心，集中存储和管理应用的所有组件状态，提供统一的状态管理机制，使状态更新和追踪变得清晰有序。创建Vuex工程在vscode中通过命令vuecreatedemovuex创建Vue3.0项目，手动选择Vuex库，同时选中Router，完成项目搭建。在main.js中引入Vuex仓库store，并在store/index.js中使用createStore方法创建Vuex

Store，定义全局状态state。Vuex仓库的使用1.2状态管理与共享在store/index.js中定义全局状态state，如name:'dell'，并在HomeView.vue和AboutView.vue组件中通过this.$访问共享数据。Vuex使得状态在多个组件间共享变得简单，通过集中管理状态，避免了状态管理的混乱和重复代码。状态更新流程修改数据需遵循特定流程：组件通过dispatch派发action，action内部通过commit提交mutation，mutation最终修改状态。例如，在AboutView.vue中通过点击事件派发changeaction，actions中处理该action并提交mutation，mutation修改name状态为lee，组件自动更新显示新值。1CompositionAPI的特性与应用1.3CompositionAPI特性 CompositionAPI是Vue3中引入的一种新的组件编写方式，提供更灵活的逻辑组织和重用方式。它基于函数的API，通过setup函数定义组件逻辑。

主要特性包括响应式引用（ref）、响应式状态（reactive）、生命周期钩子（如onMounted）、计算属性（computed）等。基础应用示例 在App.vue中使用ref创建响应式计数器count，使用reactive创建响应式状态对象state，使用computed创建计算属性doubledCount，使用onMounted添加生命周期钩子。

通过setup函数返回的属性和方法可以在模板中使用，实现了一个简单的计数器应用，展示了Composition

API的基本使用方法。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3项目概述与需求分析02项目目标与功能需求2.1010203功能需求概述网上商城项目涵盖用户注册登录、商品浏览、购物车管理及订单结算等核心功能，满足用户一站式购物需求。商城首页需展示促销活动、商铺分类导航、附近店铺列表等信息，提供丰富购物体验。技术目标阐述熟练掌握Vue3.0的CompositionAPI，包括响应式引用和生命周期钩子，提升代码组织与复用性。深入理解Vuex状态管理，实现跨组件状态共享与高效管理，保障应用数据一致性。性能优化考量优化商城首页加载速度，采用路由懒加载、组件拆分等技术，减少首屏加载时间。对购物车、订单处理等关键功能进行性能优化，确保操作流畅，提升用户体验。项目目标与功能需求2.1商城页面运行截图：业务流程与用户交互2.2 用户通过注册登录进入商城，浏览商品分类与店铺，点击店铺进入详情页，可将商品加入购物车。购物车支持商品数量调整、总价更新及商品删除，用户可一键结算订单，完成购物。 商家详情页展示商家名称、logo、销售量、起送价等信息，为用户提供全面商家参考。采用复用组件展示商家信息，保证首页与详情页界面一致性，提升开发效率。 注册登录页面简洁明了，输入框与按钮布局合理，提供错误提示与跳转链接。购物车结算流程清晰，明确显示订单信息、总价及提交按钮，确保用户操作便捷。用户购物流程商家信息展示交互设计要点2.3知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3技术选型与开发环境搭建03技术选型依据3.1Vue3.0框架优势Vue3.0引入CompositionAPI，提供更灵活组件编写方式，便于组织与重用逻辑。采用Proxy实现响应式系统，性能优于Vue2.x，适配大型复杂项目开发。Vuex状态管理价值Vuex集中管理应用状态，解决多组件间状态共享难题，状态更新清晰可追踪。支持异步操作与模块化管理，满足复杂业务场景需求，保障应用可扩展性。其他技术选型使用axios进行HTTP请求，封装请求函数优化代码，提升请求效率与可维护性。引入normalize.css与sass预处理器，规范样式编写，实现跨浏览器样式一致性。开发环境搭建步骤3.2项目初始化使用vue-cli创建Vue3.0项目，手动选择Router、Vuex、CSSPre-processors等特性。安装ESLint与Vetur插件，规范代码风格，提升开发效率与代码质量。样式与基础配置配置rem单位，引入normalize.css与iconfont.css，确保移动端适配与图标使用便捷。创建base.scss与index.scss，统一管理样式变量与混入，便于全局样式调整。路由与状态管理配置配置Vue

Router，定义项目路由结构，设置动态路由与路由守卫，实现页面权限控制。初始化Vuex仓库，定义state、mutations、actions等，为状态管理提供基础架构。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3用户登录与注册功能开发04登录注册页面设计4.1登录页面布局注册页面布局样式与交互优化设计简洁登录页面，包含用户名、密码输入框与登录按钮，提供清晰用户指引。使用v-model实现双向数据绑定，实时获取用户输入信息，提升交互体验。注册页面包含用户名、密码及确认密码输入框，严格校验用户输入信息，确保数据准确性。提供注册成功跳转登录页面逻辑，简化用户操作流程。使用Toast组件自定义登录注册提示信息，提升页面美观度与用户体验。优化输入框与按钮样式，适配不同设备屏幕，确保页面在移动端与桌面端均有良好表现。登录注册功能实现4.2本地存储应用利用localStorage存储用户登录状态（isLogin），避免用户重复登录，提升用户体验。在路由守卫中读取isLogin状态，实现页面访问权限控制，保障应用安全性。axios请求封装封装axios请求函数，统一管理请求路径与参数，简化代码编写，提升请求效率。使用axios获取userinfo.json数据，实现登录校验功能，确保用户信息准确性。路由配置与优化配置登录注册路由，设置路由守卫，实现页面访问权限控制与跳转逻辑。优化路由配置，确保登录注册页面在不同场景下均能正确加载与显示。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商城首页的实现步骤05商城首页功能实现5.1搜索与导航功能

开发搜索框组件，支持关键词输入与搜索操作，提升用户查找商品效率。

实现商铺分类导航，涵盖超市便利、水果店等分类，引导用户快速定位感兴趣店铺。附近店铺展示

引入附近店铺列表，展示店铺logo、名称、销售量等信息，吸引用户关注周边商家。

使用动态路由与复用组件，点击店铺跳转至详情页，增强页面交互性。促销活动展示

设计促销活动区域，突出显示当前优惠信息，吸引用户参与促销活动。

结合Vuex管理促销活动状态，确保活动信息实时更新与同步。商城首页性能优化5.2组件拆分与复用

将首页拆分为多个独立组件，如StaticPart、Nearby等，降低组件耦合度，便于维护与扩展。

复用商家信息组件，减少重复代码，提升开发效率与页面渲染性能。路由懒加载应用

对首页及其他页面采用路由懒加载，按需加载页面资源，减少首页首屏加载时间。

结合Webpack代码分割，优化打包文件结构，提升应用加载速度。选择自定义特性E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商家详情与购物车功能开发06商家详情功能实现6.1商家信息展示创建ShopInfo组件，复用商家信息展示逻辑，包括店铺名称、logo、销售量等信息。在商家详情页引用ShopInfo组件，结合动态路由参数获取商家详细信息，实现商家信息动态展示。010203商品列表展示开发商品列表组件，展示商品图片、名称、价格、销量等信息，为用户提供全面商品参考。使用Vuex管理商品列表状态，支持商品筛选与排序功能，提升用户购物体验。详情页交互设计设计返回按钮，点击返回上一页，优化用户浏览路径。实现商品详情页与购物车页面跳转逻辑，用户可直接从详情页添加商品至购物车。购物车功能实现6.2购物车管理功能

实现购物车商品添加、删除功能，用户可自由管理购物车商品。

提供商品数量调整功能，用户可增加或减少商品数量，实时更新商品总价。结算功能开发

设计结算按钮，点击进入订单确认页面，展示订单详细信息，包括商品名称、规格、数量、总价等。

实现订单提交功能，用户确认订单信息无误后，可完成支付操作。性能与优化

使用Vuex管理购物车状态，确保购物车数据实时更新与同步，提升购物车操作响应速度。

优化购物车页面布局与样式，确保在不同设备上均有良好表现，提升用户体验。E6636BC20180234D78A0072836F0BA7012B9B20215E26B50AC