Vue企业开发实战（第2版）-课件 全套 项目1 -11大觅项目架构设计 - AI编程辅助与应用实践

《Vue企业开发实战》·Vue3企业级项目教程项目1大觅项目架构设计任务1业务场景·任务2环境搭建·任务3前端架构设计授课教师：XXX学习目标初步掌握Vue3项目开发的完整思路01业务理解了解大觅项目的业务场景与需求分析02环境搭建掌握利用Vite快速搭建Vue3项目环境03UI框架学会引入ViewUIPlusUI框架04架构思想理解前端分层架构设计与模块化思想05技术栈熟悉Vue3主流技术栈的组成项目知识导图三个任务贯穿：业务→环境→架构项目导读为什么从大觅项目开始学Vue3随着互联网技术不断发展，前端框架大大节约了开发成本和时间。典型代表是Angular.js、React.js、Vue.js。其中Vue3更易上手、灵活度更高，在企业级开发中受到青睐。本书大觅项目基于Vue3框架实现。业务场景介绍大觅网在线票务销售的页面与需求技术选型确定Vue.js+Vite及配套插件环境搭建安装Node、NPM/CNPM，用Vite初始化项目架构设计分层、模块化、前后端分离与UI框架TASK01大觅项目业务场景01业务分析02业务梳理03技术栈选型任务1大觅项目是什么业务类型：在线票务销售/支持选座订票在互联网普及的今天，用户习惯通过网络完成商品和门票订购。大觅网就是一个支持选座订票的典型网站。图1.1首页图1.2详情页图1.3选座页1.1.1大觅项目业务分析先按功能模块把整站页面拆开五大功能模块•登录注册：登录页、注册页•浏览入口：首页、栏目页（戏剧/体育/亲子/舞蹈古典/摇滚）•商品浏览：列表页、详情页•下单闭环：选座→确认→支付（微信/支付宝）•个人中心：订单、个人信息、常用购票人1.1.2大觅项目业务梳理入口在首页，先走通一条完整购票路径示例主路径•首页左侧导航→列表页•列表商品→详情页•选时间/票价/数量•选座购买→选座页•已登录→信息确认页•提交订单→支付页•微信支付或支付宝支付1.1.3大觅项目技术栈选型四化思想相通，按项目需要选型前端自动化、组件化、工程化、模块化——同类技术很多，但基本思想相通。本项目核心是组件化框架Vue.js，因此确定Vue.js+Vite。Node前端基础运行环境，必须安装NPM/CNPM包管理；建议切国内镜像加速Vite开发工具，初始化Vue项目ViewUIPlus搭配Vue的UI组件库vue-router页面路由Pinia状态管理，本项目先不装ES6编写JavaScript的语法Axios官方推荐的异步请求插件Mock前后端分离，用Mock模拟后台数据TASK02大觅项目环境搭建01Node.js02NPM/cnpm03Vite脚手架1.2.1Node.js介绍与安装基于ChromeV8的JavaScript运行环境它是什么•事件驱动、非阻塞I/O，轻量高效•可以理解为JavaScript的runtime（运行时）•runtime类似国际会议中的同声翻译如何验证安装成功•Win+R→输入cmd打开命令提示符•输入node-v，能显示版本即安装成功•课上使用当前LTS，以node-v显示为准图1.8按操作系统和位数选择安装包1.2.2什么是NPMNode.js自带的包管理器，全球最大开源库生态安装Node.js时已经自带NPM。命令行输入npm-v，能显示版本即安装成功。npminstall<Module>-g安装模块；-g表示全局安装npmlist<Module>查看某个模块的版本号npmuninstall<Module>卸载模块npmupdate<Module>更新模块全局vs非全局：npminstallexpress-g后，任意目录都能直接使用express创建项目；不加-g是局部安装，模块只下载到当前目录，换目录就会出现“不是内部或外部命令”。1.2.3安装cnpm国内网络下切国内NPM镜像，减少超时和异常NPM安装插件需要从国外服务器下载，受网络影响大、速度慢、容易异常。国内镜像可使用，减少超时。安装命令npminstall-gcnpm--registry=•安装成功后输入cnpm-v查看版本•此后所有用到npm的地方都可以替换为cnpm•等于把下载源切换到国内镜像1.2.4开发工具Vite官方命令行工具，几分钟即可创建带热重载的单页应用Vite提供开箱即用的构建配置：热重载、保存时静态检查，以及可用于生产环境的构建。它用Node编写，需全局安装。单页面应用SPA•只有一个Web页面的应用•公共JS/CSS一次性加载•后续路由变化由JS动态更新•不需要刷新整个页面•用户体验更好，开发常需专业框架多页面应用MPA•访问新页面时重新加载全部资源•每个页面都是完整HTML•CSS/JS不共用，重复加载•整页刷新，流畅度较差•开发成本较低，但重复代码多用Vite创建大觅项目先全局安装，再初始化，再装依赖、再启动1全局安装Vitenpminstall-gvite2创建项目npmcreatevite@latestdm3进入目录cddm4安装依赖npminstall或npmi5启动项目npmrundev6浏览器验证http://localhost:5173（以终端为准）脚手架交互选项图1.14用create-vue快速生成项目交互含义与建议Projectname回车即用命令后的项目名，如dmTypeScript建议：不需要JSXSupport建议：不需要VueRouter建议：Yes（一般项目都要路由）Pinia建议：不需要（状态管理后文用Pinia，本项目先不选）Vitest/E2E建议：不需要ESLint建议：不需要Prettier建议：YesVueDevTools7建议：不需要依赖安装、启动与目录结构成功标志：出现node_modules，浏览器打开欢迎页图1.15依赖都在node_modules图1.16启动成功欢迎页主要目录•src：组件和入口文件•public：静态资源（Vite工程以此为准）•index.html：文件入口•node_modules：依赖包•package.json：脚本与依赖描述表1-1单页面应用和多页面应用对比选型时把体验、SEO、开发和维护成本一起看对比项单页面应用SPA多页面应用MPA组成一个外壳页面+多个页面片段多个完整页面资源共享共用，只需在外壳加载不共用，每页都要加载刷新方式局部刷新或更改整页刷新URL模式/#/pageone/pageone.html用户体验切换快，体验好加载慢，流畅度不够SEO需单独方案，较难可用SSR，实现较易开发成本较高，常需专业框架较低，但重复代码多维护成本相对容易相对复杂上机练习1使用Vite搭建大觅项目需求：命令行安装依赖并能启动，看到欢迎页操作要点•npmcreatevite@latestdm•完成交互选项•cddm后执行npmi•npmrundev启动•浏览器访问本地地址确认成功•对照图1.18检查页面效果TASK03前端架构设计01分层与模块化02分离方式03VSCode/UI/Vite1.3.1为什么要做前端架构设计原始开发的六个痛点，正是框架要解决的问题01难以维护页面和脚本缠在一起，改一处容易牵一片02加载缓慢资源无规划，首屏和跳转都慢03体验差整页刷新、重复加载，操作不流畅04重复编码同样的列表、表单到处复制05扩展困难新功能没有清晰插入点06前后端耦合改页面还要等后端改模板分层架构&模块化大觅项目采用类MVVM的分层，代码用ES6模块组织分层架构把功能相似、抽象级别相近的实现分层，使逻辑清晰、易理解和维护，也称作多层架构或N层架构。主要优势•易维护•可扩展•易复用•灵活性高模块化自顶向下把系统划分成若干模块。每个模块完成一个子功能，再组装成整体。模块可组合、可分解、可更换，也能解耦、支撑并行开发。常见方案•AMD（requirejs）•CMD（seajs）•CommonJS•ES6（本项目采用，保证前瞻性）1.3.2分离方式大觅项目采用：分离开发+分离部署01不分离前后端共用同一项目目录。本地环境成本高，复杂难维护，发布风险高，不便定位问题。02部分分离仍要后端提供JSP等页面模板。改模板靠后端，效率低；发布要一起发，沟通成本高。03完全分离又分：分离开发集成部署/分离开发分离部署。本书用第二种：前端纯HTML，靠接口交互，单独部署，用代理取数。集成部署安全性较高；完全分离能降低复杂度，再用接口与代理保证交互。1.3.3VisualStudioCode免费跨平台编辑器，不是VisualStudio为什么选它•2015年发布，可运行于Windows/macOS/Linux•性能好、特性全，针对Web开发做了优化•调试方便，常被评为好用的前端IDE•下载对应系统版本，下一步即可安装•扩展插件可在侧边栏安装，也可上Marketplace获取•做Vue项目时重点关注Vue相关扩展1.3.4UI框架怎么选工期紧、精细化要求不高时，用UI框架最划算优点•快速搭建Web页面•把精力放在业务代码•缩短开发周期缺点•存在冗余代码•难以定制化、精细化开发选择标准（三条都要过）01满足项目设计稿里需要的模块，框架里必须有。没有日历就直接淘汰。02组件与效果功能只是底线，还要看炫酷度、视觉冲击和性能。03API与社区文档完整、社区活跃，遇到问题能快速解决，降低成本。ViewUIPlus：安装与引入基于Vue.js的开源UI组件库，服务PC中后台特性：高质量、功能丰富·友好API·细致漂亮的UI·文档细致·可自定义主题。推荐NPM安装，因为项目用的是Vite。安装+全部引入（main.js）npminstall@view-ui-plus--saveimport{createApp}from'vue'importAppfrom'./App.vue'importViewUIPlusfrom'@view-ui-plus/components'import'@view-ui-plus/components/dist/styles/viewuiplus.css'constapp=createApp(App)app.use(ViewUIPlus)app.mount('#app')两种引入方式怎么选•全部引入：短平快，任意页面直接用，但体积大、冗余多•按需引入：先装unplugin-vue-components、unplugin-auto-import，再在vite.config.js配ViewUiPlusResolver•--save写入dependencies（运行时依赖）•--save-dev写入devDependencies（开发时依赖）上机练习2引入ViewUIPlus把欢迎页里的内容换成一个Success按钮需求说明•将ViewUIPlus全部引入大觅项目•打开src/components/HelloWorld.vue•删除class为hello的div内部标签•替换为框架按钮组件替换代码<Buttontype="success">Success</Button>验收页面应出现ViewUIPlus的绿色Success按钮。组件：把完成各自功能的代码段封装成独立部分。用户界面组件最终拼出整个界面。1.3.6为什么需要构建工具Vite把js/css/less等转成可上线的静态文件01解决依赖顺序CSS不生效、变量找不到，常常是JS/CSS引入顺序错了。构建工具能管依赖。02性能优化项目一大就有很多JS。构建工具做文件合并与压缩，减少请求。03提升效率CSS3前缀人工加又累又容易漏。构建工具可自动补前缀。图1.24模块打包示意上机练习3读懂并改vite.config.js增加路径别名@→src，为后面组件化做准备vite.config.js示例import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve(__dirname,'./src')}}})逐行理解+验证•defineConfig：定义配置，带类型提示•plugins:[vue()]：让Vite能编译.vue单文件组件•默认入口：src/main.js•alias'@'：把@映射为src目录•在HelloWorld.vue中测试：importXxxfrom'@/components/Xxx.vue'•能正确解析即说明别名生效本项目小结一条线：看懂业务→搭起工程→定下架构任务1大觅是在线票务网站。先拆登录/注册/首页/详情/选座/支付/个人中心，再沿首页走通一条购票路径。技术栈定为Vue3+Vite。任务2安装并验证Node/NPM，必要时切cnpm。用Vite创建dm项目，安装依赖后npmrundev跑起来。任务3用分层和ES6模块化组织代码；前后端完全分离、分离部署。编辑器用VSCode，UI用ViewUIPlus，构建用Vite。本项目作业先口头说清，再对照工程验证简答1简述大觅项目的需求。简答2简述大觅项目的业务逻辑。简答3如何安装和调试Node.js？如何使用Vite搭建项目？简答4如何在项目中使用ViewUIPlus框架？简答5如何在项目中安装、配置构建工具Vite？作业简述大觅项目的需求及业务场景；简述架构设计包含的内容。《Vue企业开发实战》·Vue3企业级项目教程项目2大觅项目中ES6的使用任务1let/const·任务2解构赋值·任务3箭头函数任务4Map·任务5Module·任务6Promise授课教师：XXX在线票务销售·Vite+Vue3·ES6语法落地学习目标能在大觅工程里用ES6写声明、取值、模块和异步01let/const会用let、const声明，能说明它们和var的差别02解构赋值能从数组、对象里快速取出需要的值03箭头函数会写箭头函数，知道this绑定和不适用场景04Map能用Map存储和遍历键值对05Module会用export/import拆分模块06Promise能创建Promise，用then/catch处理异步项目知识导图六个任务：声明→取值→函数→键值→模块→异步任务1let/const块级作用域、不提升、不可重复声明任务2解构赋值数组、对象、默认值、重命名任务3箭头函数this绑定、剩余参数、不适用场景任务4Map任意类型作键，size/set/get/遍历任务5Moduleexport、import、exportdefault任务6Promise状态、then链式、catch、all/race项目导读为什么大觅项目要先补ES6ES6是JavaScript的下一代标准，用来写更复杂的企业应用。Vue3的组合式API、模块拆分、接口取数，都会用到这些写法。本项目不空讲语法，而是接到dm工程：声明怎么选、字段怎么拆、文件怎么分、异步怎么排。声明let/const代替var，少污染作用域取值解构从票务JSON里抽出字段函数箭头函数处理回调里的this工程Module拆文件，Promise为后文Axios铺路TASK01let和const命令01let的三条规则02for循环与上机03const与Vue3习惯2.1.1let命令ES6新增声明，用来避免var的作用域混乱块级作用域只在当前{}有效。块外访问let会报错，var仍能取到值。不提升必须先声明再使用。var提前访问是undefined，let提前访问直接报错。不可重复声明同一作用域不能再用let/var声明同名变量。形参同名也不行。for的父子作用域for(leti...)每次循环有自己的i，适合给按钮绑点击。let对照示例块外访问、提升、重复声明，三处一眼能看出差别{leta=10;varb=1;}console.log(a)//ReferenceErrorconsole.log(b)//1console.log(foo)//undefinedvarfoo=2console.log(bar)//ReferenceErrorletbar=2functionfunc(){leta=10leta=1//报错：同一作用域重复声明}functionfunc(arg){letarg}//报错：与形参同名functionfunc(arg){{letarg}}//可以：里层是新作用域for循环里的let五个按钮点哪个，就要打印第几个用var：点谁都是第5个varbtns=document.querySelectorAll('button')for(vari=0;i<btns.length;i++){btns[i].onclick=function(){console.log('这是第'+i+'个按钮')}}for是同步的，点击是异步的。函数执行时再去找i，只剩循环结束的5。改成let：每个按钮有自己的ifor(leti=0;i<buttons.length;i++){buttons[i].onclick=function(){console.log('第'+i+'个按钮')}}上机练习1：用let改写按钮循环，浏览器里点第n个就打印第n个。合格：序号与下标一致。2.1.3const命令只读的是绑定，不是对象里面不能改constPI=3.1415PI=3//TypeErrorconstfoo//SyntaxError//必须立刻赋值constfoo={}p=123//可以foo={}//报错：改指向consta=[]a.push('Hello')//可以a=['Dave']//报错作用域和let一样，只在当前块有效，不提升，不能重复声明。简单类型数字、字符串、布尔存在绑定里，改值就是改绑定，会报错。对象/数组绑定的是地址。加属性、改成员可以，整段换成另一个对象不行。Vue3里怎么选声明三条习惯，本项目后面一直用01优先const能不改绑定就用const，组件里最常见。02要重赋再用let计数、切换、循环下标这类会变的值。03避免var少一次作用域污染，也不和let抢同名。TASK02变量的解构赋值01数组解构02对象解构03从接口取字段2.2.1数组的解构赋值按位置匹配，模式对得上就能取值leta=1,b=2,c=3//传统let[a,b,c]=[1,2,3]//ES6let[foo,[[bar],baz]]=[1,[[2],3]]let[x,,y]=[1,2,3]//y=3let[x,y]=['a']//y=undefinedlet[x,y]=[1,2,3]//不完全解构也可以默认值let[foo=true]=[]//truelet[x,y='b']=['a']//y='b'let[x=1]=[undefined]//1let[x=1]=[null]//null默认值只在成员严格等于undefined时生效。null不是undefined，所以不会走默认值。2.2.2对象的解构赋值按属性名匹配，不按顺序；真正被赋值的是后面那个名字let{bar,foo}={foo:'aaa',bar:'bbb'}//foo='aaa'bar='bbb'次序无所谓let{baz}={foo:'aaa'}//undefinedlet{first:f,last:l}={first:'hello',last:'world'}//first是模式，f/l才是变量接到大觅接口数据const{id,title,price}=productDatalet{x:y=3}={}//y=3let{x:y=3}={x:5}//y=5上机练习2：从JSON取出id、status、data。合格：控制台结果对，且不再用一长串下标访问。TASK03使用箭头函数01this问题02写法与差别03不适用场景2.3.1箭头函数起因定时器里的普通函数，this不再指向对象constPerson={username:'小暖',age:18,sayHello:function(){setInterval(function(){console.log('我叫'+this.username+...)},1000)}}Person.sayHello()课上先看输出•直觉：我叫小暖我今年18岁•实际：username/age都是undefined•原因：setInterval在全局执行，this是window•旧写法：先letself=this再在回调里用self箭头函数在定义时绑好this，并且写法更短。本项目后面回调、then里会经常用到。2.3.2箭头函数怎么写没有自己的this、arguments、super、new.target(参数1,参数2)=>{函数体}(参数1,参数2)=>表达式//相当于return单一参数=>{函数体}//圆括号可省()=>{函数体}//无参必须有()()=>console.log('Hello')和普通函数的两点差别•this在定义时绑定，以后怎么调用都不改•没有arguments，要用剩余参数...theArgs•代码更短，适合非方法函数functionPerson(){='小暖';this.age=20setInterval(()=>console.log(,this.age),1000)}2.3.4不适用场景不是所有function都要改成箭头01对象方法对象括号封不住作用域。方法写成箭头时，this仍指向全局，读不到username。02构造函数箭头函数不能当构造函数，new会报错。03原型方法Ptotype.sayHello=()=>{}时，this指向window，和对象方法同类问题。适合用在非方法函数。需要动态改this时，不要用箭头。上机先改对定时器，再故意把对象方法改成箭头，看失败。TASK04Map数据结构01和Object的差别02常用方法03上机走一遍2.4.1Map的特点键值对要更灵活时，用Map比普通对象合适任意类型作键字符串、数值、布尔、对象、函数都可以当键。Object的键通常只能是字符串或Symbol。直接拿数量map.size就是成员个数，不必自己遍历计数。天生可遍历for…of、keys()、values()、entries()、forEach()都能直接用。2.4.3Map常用方法创建、读写、判断、删除、遍历，上机走一遍constmap=newMap([['name','张三'],['title','Author'],])map.set('edition',6).set('friends',['大花'])map.get('name')//张三map.has('edition')//truemap.delete('years')//falsemap.size//成员总数四种遍历•keys()：键名•values()：键值•entries()：键值对，可直接解构•forEach(value,key)：遍历全部成员上机：创建Map，完成写入、读取、has、delete和forEach。作业还会用Map筛选票务JSON数组，只留下新的market、operator字段。TASK05Module的语法01为什么要拆模块02export/import03exportdefault2.5.1Module概述文件即模块，每个文件有自己的作用域早期只能靠<script>标签顺序加载，容易重名、依赖乱。ES6Module显式导出变量、函数、对象，需要的人再import。.vue文件每一个单文件组件都是一个模块。组件引用组件之间用import/export互相引用。工程文件路由、状态管理也按模块拆，后面Pinia、Router都这样写。2.5.2export与import导出什么，导入时花括号里的名字就要对上exportletfirstName='Michael'exportletyear=1958letfirstName='Michael'export{firstName,year}exportfunctionmultiply(x,y){returnx*y}import{firstName,year}from'./profile.js'//导入的变量只读//from后可用相对路径//.js后缀可以省略分别导出和统一导出都可以。导入名必须和导出名一致。对象属性虽能改，课上按只读来用。2.5.3exportdefault默认导出可以在导入时自己起名；一个模块只能有一个//export-default.jsexportdefaultfunction(){console.log('foo')}importcustomNamefrom'./export-default'customName()//foo和命名导出怎么选•命名导出：导入时必须写对名字，可一次导多个•默认导出：导入名可自定，适合模块的主功能•Vue组件常用exportdefault{...}上机练习3：新建utils.js，导出add(x,y)；在main.js导入并打印结果。想一想：这里用export还是exportdefault更合适？拆完后文件是否更好维护？TASK06Promise对象01三种状态02then/catch03接到Vue3取数2.6.1Promise是什么把异步结果和处理逻辑分开，避免回调一层套一层定时器、网络请求以前靠回调。套多层就是回调地狱。Promise用“状态+链式调用”把异步写清楚，后面Axios、fetch的返回值本质都是它。pending进行中刚创建，还没出结果。状态只会从pending出发，且改过就不能再改。fulfilled已成功调用了resolve，数据往then传。状态只会从pending出发，且改过就不能再改。rejected已失败调用了reject，错误往catch传。状态只会从pending出发，且改过就不能再改。2.6.2创建、then与catchexecutor会立刻执行；第一次resolve/reject说了算constp=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('用户数据加载成功')//reject('加载失败')},1000)})p.then(v=>console.log('成功',v),e=>console.log('失败',e))p.catch(reason=>console.log(reason))链式调用•then的返回值还是Promise，可以继续then•返回普通值：直接给下一步•返回Promise：等它完成再继续•catch等价于then(null,onError)，建议写在链末尾统一收错误•先resolve再reject，失败回调不会走p.then(v=>{console.log('第一步',v);return'处理后的结果'}).then(msg=>console.log('第二步',msg))2.6.6常用静态方法课上先记住四个，后面请求会反复碰到Promise.resolve立刻得到一个成功的Promise。Promise.reject立刻得到一个失败的Promise。Promise.all全成功才成功，结果按数组排；有一个失败就立刻失败。适合并行拉用户和订单。Promise.race谁先结束听谁的，不论成功失败。常用来做超时控制。2.6.7在Vue3项目里怎么用为项目5的Axios打底，现在先看清写法fetch('/api/movies').then(res=>res.json()).then(data=>console.log(data)).catch(err=>console.log(err))onMounted(()=>{getMovieDetail(1001).then(res=>{/*填到页面*/}).catch(err=>{/*给提示*/})})四种落地•处理网络请求：fetch/Axios都返回Promise•在onMounted里加载详情、列表•把延时、模拟请求封成工具函数•Promise.all同时拉多个接口上机：写一个delay或模拟取数的Promise，成功走then，失败走catch。选做Promise.all。能说清输出顺序即达标。本项目小结一条线：声明清楚→取值省事→文件能拆→异步能排任务1–2let解决按钮序号；const只锁绑定。解构把票务JSON拆成字段。Vue3优先const。任务3–4箭头函数绑定义时的this，对象方法、构造、原型不要用。Map用来管更灵活的键值。任务5–6export/import拆模块，default可自己起名。Promise三态不可逆，then/catch为后文请求做准备。本项目作业先口头说清，再对照代码验证简答1简述let、const与var的异同点。简答2简述变量的解构赋值，并举一个从对象取值的例子。简答3简述箭头函数的起因、用法，以及两种不适用场景。简答4简述Map的常用属性及方法。简答5简述Module的应用场景；说明Promise如何避免回调地狱。编程：用Map筛选JSON数组；实现timeout，指定毫秒后打印done。《Vue企业开发实战》·Vue3企业级项目教程项目3大觅项目的路由配置任务1什么是前端路由·任务2VueRouter基本使用·任务3页面间导航授课教师：XXX在线票务销售·VueRouter4·SPA导航学习目标掌握用VueRouter搭建大觅路由，并用编程式导航换页01路由原理能说明路由分发：不同URL对应不同处理逻辑或页面02前端路由能对比hash与history，说出SPA里换页为什么不必整页刷新03路由器落地能安装或沿用脚手架路由，建立模块并在应用中启动04重定向与懒加载能把根路径转到首页，并把详情等页改成按需加载05声明式与编程式会用router-link，也会按场景选用push/replace/go项目知识导图三个任务贯穿：原理→配置链条→购票流程怎么跳任务1什么是前端路由路由分发、hash/history、SPA使用场景与利弊任务2VueRouter基本使用安装、路由表、启动、重定向、懒加载、router-link、路由对象任务3页面间导航push进历史、replace换当前、go前进后退项目导读Vue适合做大型单页应用，但本身不带路由官方用插件VueRouter补上这条链条。Vue3搭配的是VueRouter4，支持嵌套路由、懒加载、具名路由等。本项目把大觅的首页、列表、详情、选座、支付串成可运行的导航；后文其它页也会继续走这条链，所以要一次把配置链条走通。原理先搞清URL怎么对应到页面，再谈API。配置安装→路由表→use→router-view，四处缺一处就不跳。流程菜单用router-link；购票过程用push/replace。版本课上按Vue3+Router4写，不再混用2.x写法。TASK01什么是前端路由01路由分发02hash与history03SPA场景与利弊3.1.1什么是路由按路径把请求交给对应的处理逻辑，这就是路由分发假设一台Web服务器地址是，对外提供三个页面。用户访问其中一个地址时，服务端解析路径，再交给对应逻辑——完成一次分发。路径//·站点入口，通常对应首页路径/about/about·关于页路径/concat/concat·联系页（教材示例拼写）一次路由分发怎么走以前这件事多半在后台；前端路由是把同一件事拿到JS里做01用户访问浏览器对某个完整URL发起访问，例如…/about。02解析路径程序取出路径段/about，而不是整段域名。03匹配规则在路由表里找到这条路径对应的处理逻辑或组件。04交给处理后台就返回html；前端就在当前页里换一块视图。后端路由和前端路由原理一样：不同URL展示不同内容；实现位置不一样后端路由•用户请求URL，服务器导航到具体html页面•每次换页都向服务器要新页面•一定有网络往返，可能闪白、有延迟•适合传统多页：每个栏目一个html•大觅若这样搭，头尾、脚本会重复加载前端路由•在JS里配置：路径↔组件•换页主要是改路径、换视图，公共资源留下•这就是单页应用SPA的换页方式•后端仍负责接口和数据，不负责每个栏目一份html•登录、下单校验仍在服务端，前端路由不管权限本身3.1.2前端路由怎么读路径historyAPI出现之前，前端多用hash；Web服务会忽略#后面//#/about/#/concatwindow.location.hash//例如"#/about"为什么能工作•服务器不解析hash，#后面当客户端标记•JS能读到hash，再决定渲染哪个组件•刷新不易404，低版本浏览器也能用•地址带#，不好看，也不像“真路径”HTML5提供historyAPI，可以操作浏览器的sessionhistory。VueRouter的createWebHistory走这条路，地址栏是/about而不是/#/about。本项目默认history。hash与history对照课上用history；刷新404时要能说出原因对比项hashhistory地址形态/#/detail/detail谁解析路径JS读location.hash；服务器忽略#后浏览器与前端路由一起处理path刷新一般仍回到同一套SPA，不易404服务器若没配回退，会404观感/分享带#，有人会当成锚点像普通网址，好分享课上选择兼容演示可以提createWebHistory，部署要让所有path回到index.html3.1.3前端路由用在哪更多用在单页应用：前后端分离后，后端不再给每个栏目一份页面路由大觅首页点“戏剧/体育”，详情、选座、支付都还在同一个工程里切。若每个栏目都是完整html，体验和维护都会回到项目1讲过的MPA问题。优点•换页主要改路径，没有再向服务器要一整页的延迟•AJAX只换内容、URL不变时，用户复制不到想要的地址；前端路由让URL跟着视图走，详情可以分享要注意•前进后退要按历史记录走，没有记录时go会失败•history模式部署必须让任意path都能回到SPA入口•前端路由不管登录校验本身，只负责切哪一块视图先画出大觅路径草案命名用英文小写，不要写成list.html/重定向到首页，避免打开站点一片空白/home首页：栏目入口、推荐/list列表，可用query表示戏剧/体育等栏目/detail详情，用query或动态段带演出id/seat→/confirm→/pay购票主路径，后两步常考虑replace/login/user登录、个人中心与订单上机1写出路径表覆盖购票主路径，标出前后步要求•列出大觅主要页面与建议path•标明哪几步是流程中的前后步（选座→确认→支付）•小组互评是否漏了支付/个人中心•不要写成list.html这种文件名•下次课直接拿这张表写routes数组合格路径表完整、命名合理、能口述“这个地址打开哪一页”。漏支付或写成html文件名不算过。TASK02VueRouter基本使用01安装与路由表02启动与router-view03重定向/懒加载/链接3.2.1安装路由Vue3官方推荐VueRouter4；绝大部分应用创建时就会勾选用Vite创建dm时，若「AddVueRouterforSinglePageApplicationdevelopment?」选Yes，会自动装vue-router@4并生成src/router。项目1建议选Yes。没勾选再手动装。npminstallvue-router@4npmlistvue-router装完看版本是4.x。不要误装成3.x。国内网络可用镜像。装完在src下建router/index.js，集中写路由表。脚手架勾选后，打开src/router/index.js就能看到createRouter。后续只要在入口把router安装到应用上，整个项目就具备路由功能。脚手架生成的路由器长什么样history用HTML5模式；routes里是路径与组件的映射import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',component:()=>import('../views/AboutView.vue')},],})exportdefaultrouter3.2.2一条路由三部分一个路由是一个对象：path、name、componentimportHelloWorldfrom'@/components/HelloWorld'importLoginfrom'@/pages/login'routes:[{path:'/',//后期改为项目首页name:'HelloWorld',component:HelloWorld},{path:'/login',//登录页name:'Login',component:Login},]对照着记•path：地址栏里的路径•name：命名路由，编程式跳转更稳•component：要渲染的页面组件•再加页面就按同样格式往数组里追加•@能省略.vue，是因为项目1配了别名和Vite•*.vue是单文件组件，模板、脚本、样式写在一起3.2.3启动路由器入口负责创建应用，并把路由安装上去//main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)app.use(router)app.mount('#app')<!--App.vue--><template><divid="app"><router-view/></div></template>匹配到的组件渲染在<router-view>里。漏app.use(router)，跳转无效；漏router-view，导航有了画面空。先切两个空页面验证，再填业务。组件渲染链路调试时按这条链往回找，不要只盯着某一个文件01index.html浏览器加载页面，根节点是<divid="app"></div>，再引入/src/main.js。02main.jscreateApp(App)，app.use(router)，mount('#app')。03App.vue<router-view/>是占位符，按当前URL放入对应组件。04路由表path对上了，才知道放Home还是Detail。3.2.4路由重定向打开站点应落到首页；全局重定向在匹配当前路径之前执行//目标是路径{path:'/a',redirect:'/b'}//目标是命名路由{path:'/a',redirect:{name:'foo'}}{path:'/b',name:'foo',component:Foo}//目标是方法，可动态决定{path:'/a',redirect:(to)=>{console.log(to)return'/b'}}//大觅常用{path:'/',redirect:'/home'}课上怎么用•用户收藏根地址也能进首页•redirect写目标path或name•方法形式本课知道即可，先把/→/home做稳•和404不是一回事：重定向是“已知要去哪”•写错目标path会跳到空白，先对照路由表3.2.5路由懒加载别把所有页面打进一个JS包，首屏会慢访问到某条路由时再下载对应组件。Vue把组件写成工厂函数，第一次渲染才去解析，并且会缓存结果。Vite会把()=>import(...)打成独立代码块。{path:'/foo',component:()=>import('./Foo.vue')}constHeader=()=>import('@/components/Header.vue')constIndex=()=>import('@/pages/Index.vue')constLogin=()=>import('@/pages/Login.vue')首页可以同步引入，减轻第一眼等待。列表、详情、报表、登录等较大或不常进的页改成懒加载。上机至少一个页面这样写。3.2.6router-link怎么写声明式导航：菜单、卡片用它，不要手写会整页刷新的a<router-linkv-bind:to="'/home'">Home</router-link><router-link:to="'/home'">Home</router-link><router-link:to="{path:'/home'}">Home</router-link><router-link:to="{name:'user',params:{userId:123}}">User</router-link><router-link:to="{path:'/register',query:{plan:'private'}}">Register</router-link><!--结果：/register?plan=private-->渲染结果本质仍是<ahref="/home">，但行为是SPA跳转。•to可以是字符串或对象•params配命名路由•query出现在?后面•当前路由会加激活class，方便菜单高亮为什么用router-link而不是手写a模式切换、无刷新、base、高亮，这四件事它都帮你做了01模式一致hash和history下写法相同，换模式不必改模板。02拦住刷新History模式下自动拦截点击，避免浏览器整页刷新。03base路径配了base会自动加前缀，不必每个to手写拼接。04激活class默认router-link-active/router-link-exact-active，菜单高亮用这个。接到大觅：卡片进详情点击广告卡跳到详情，并用query带上演出id<divclass="ad-card"><router-link:to="{path:'/ticketDesc',query:{id:headCard.id}}"><img:src="headCard.imgUrl"alt=""><divclass="ad-hide"><h3>{{headCard.itemName}}</h3><p>{{headCard.minPrice}}元</p></div></router-link></div>课上对照•整张卡都可点，不必另做按钮•query.id刷新后还在，详情页好取•详情页用useRoute().query.id读•大觅列表、推荐位都是这种跳法•path名字按你们路由表来，教材示例是/ticketDesc3.2.7路由对象常用属性跳转之后，用当前路由信息取路径和参数path当前路径，总是绝对路径，如/foo/barparams动态段参数的键值对象；没有参数时是空对象query查询参数。/foo?user=1则query.user==1hashhash值（不含#）；没有则为空字符串fullPath解析后的完整URL，含查询和hashmatched当前路由匹配到的记录数组，嵌套路由会用到怎么拿到路由对象选项式用this.$route；组合式用useRoute()，属性含义一样import{useRoute}from'vue-router'constroute=useRoute()console.log(route.path)//等价this.$route.pathconsole.log(route.query.id)课上约定•新页面用scriptsetup+useRoute/useRouter•教材若出现this.$route，知道是选项式即可•详情页优先读query.id上机2：安装并启动路由；/重定向到首页；至少一个页面懒加载；导航用router-link。点击栏目能切换，控制台无报错。TASK03页面间导航01push02replace03go按钮跳转不能只用a单击“立即购买/去支付”这种场景，要写代码调路由器实例方法单击<router-link>时，内部其实就是在调router.push。所以菜单用链接，流程里的按钮用方法，两套是同一件事的两种入口。import{useRouter}from'vue-router'constrouter=useRouter()functiongoDetail(id){router.push({path:'/detail',query:{id}})}选项式可用this.$router。组合式必须useRouter()，不要和useRoute()搞混：一个是路由器（去哪），一个是当前路由（现在在哪）。3.3.1router.push向history栈追加一条记录；浏览器后退会回到刚才那一页router.push(location)router.push('home')//字符串router.push({path:'home'})//对象router.push({name:'user',params:{userId:123}})//->/user/123router.push({path:'register',query:{plan:'private'}})///register?plan=private//等价关系//<router-link:to="...">内部就是push大觅怎么用•列表进详情：push+query.id•选座进确认：push，用户还应能返回改座•带数据跳转就用对象形式，不要拼一长串字符串•不要写成location.href，那会整页刷新•path与name不要混用错：有params时优先name3.3.2router.replace和push很像，但不会往历史里加新记录，只替换当前这一条router.replace(location)router.replace({path:'/pay-ok'})//等价<router-link:to="..."replace>什么时候必须replace•登录成功进首页：不应再退回登录表单•确认提交后进支付/成功页•课上用后退键对照：push能回，replace回不到被换掉的页购票主路径建议：首页→列表→详情→选座用push；提交订单离开填表页用replace。先讲清“用户按返回应不应该看见上一张表单”，再选API。3.3.3router.go参数是整数，在历史记录里前进或后退，类似window.history.go(n)router.go(1)//前进一步，等同history.forward()router.go(-1)//后退一步，等同history.back()router.go(3)//前进三步router.go(-2)//后退两步router.go(-100)//记录不够就会失败router.go(100)router.back()//常用别名，等价go(-1)router.forward()图3.5后退/前进/跳步-2/push/replace购票主路径：场景选API先问这一步该不该被返回，再写代码步骤建议理由首页→列表→详情push用户应能后退重新挑演出详情→选座→确认push还可能改座位、改张数确认提交→支付/成功replace避免返回改已提交表单登录成功→原页或首页replace登录页不应留在后退栈里标题栏返回go(-1)/back跟着真实历史走，不要写死path上机3综合导航（教材作业方向）默认首页+导航可点+按钮控制历史作业1四个页面能切•默认显示首页•导航项：首页、关于我们、账户中心、登录•单击导航到相应页面（图3.1–3.4）•用router-link，不要整页刷新作业2在作业1上加按钮•后退：历史后退一步•前进：前进一步•跳步-2：后退两步•push：跳到“关于我们”•replace：用“关于我们”替换当前页•互测replace后按返回，不应回到被换掉的页作业效果对照默认首页；点导航切到对应页，地址栏hash跟着变图3.1首页#/图3.2关于我们#/bar图3.3账户中心#/user图3.4登录#/login路由未生效怎么查按清单走，不要同时改五处01版本vue-router是否4.x，有没有装成3.x。02导出router/index.js是否createRouter后exportdefaultrouter。03安装main.js是否app.use(router)，且在mount之前。04出口App.vue（或布局组件）是否有<router-view/>。05对得上path与to是否一致，注意大小写和前导/；懒加载路径是否写错。本项目小结一条线：想清路径→配上路由器→按场景跳任务1路由就是按URL分发。hash靠#，服务器不解析；history地址干净，刷新可能404。SPA换页快、URL可分享。任务2Router4：路由表三要素，main里use，模板里router-view。/重定向首页；重页懒加载；菜单用router-link。任务3push追加历史，replace换当前，go按整数走历史。购票能回的用push，不该回的用replace。本项目作业先口头说清，再对照工程验证简答1简述前端路由的实现原理（可用的例子）。简答2简述路由重定向。大觅根路径应转到哪里？简答3简述router-link的用法，以及为什么不要手写会整页刷新的a。简答4简述push、replace、go的差别，并各举一个大觅场景。上机完成四个页面导航；再加后退/前进/跳步-2/push/replace按钮。先交路径草案，再交能演示的工程。replace的返回行为要能讲清楚。《Vue企业开发实战》·Vue3企业级项目教程项目4初识Vue3任务1Vue.js是什么·任务2组件与数据绑定·任务3class与style绑定授课教师：XXX在线票务销售·MVVM·单文件组件·scriptsetup学习目标从改DOM转到改数据，能把票名、价格和选中态绑到页面上01认识Vue3能说清渐进式框架、组合式API，以及和Vue2的主要差别02说清MVVM能指出Model/View/ViewModel各管什么，以及低耦合、可复用的好处03认清SFC能打开.vue指出template/script/style，并挂到路由上打开04数据进页面会写插值，能说明setup对应创建阶段、onMounted适合做什么05样式也是数据会:class、:style的对象和数组写法，能做选中高亮项目知识导图三个任务：先思维，再数据，再外观任务1Vue.js是什么MVVM、渐进式、单文件组件、scriptsetup任务2组件与数据绑定createApp、插值、生命周期钩子任务3class与stylev-bind、对象语法、数组语法、内联样式项目导读点按钮改标题：querySelector改和Vue改，不是同一条路路由已经能把大觅页面串起来，但多数人仍按“找到节点再改文字”思考。本项目先建立声明式印象：改数据，视图跟着走。指令细节、父子通信留到后面项目；本课把MVVM、SFC、插值和动态样式一次讲清。思维MVVM：ViewModel把数据和视图对上，不必手改DOM。结构.vue里template/script/style三块分工。数据插值把票名、价格显示出来；挂载后再做初始化。外观选中态、售罄色也用数据开关，不写死两套class。TASK01Vue.js是什么01MVVM02渐进式与开发模式03单文件组件Vue3是什么一套用于构建用户界面的渐进式JavaScript框架体积更小、性能更强、语法更现代化，从简单页面到企业应用都能用。课上按Vue3+Vite+scriptsetup写，不再混用Vue2的Vetur/选项对象当默认写法。01组合式APICompositionAPI：逻辑按功能组织，而不是按data/methods切块。02更快的虚拟DOM内部渲染更快，同样的列表更新成本更低。03更好的TypeScript类型推断更顺；本课仍以JS为主，知道它更好即可。04默认用Vite项目1已经用Vite起dm。不再把Webpack当入门门槛。4.1.1MVVM模式Vue3借鉴并实现其核心思想：响应式系统+模板渲染不必强行按MVVM拆文件夹。课上要能指出三块各管什么，以及“谁在更新DOM”。图4.1View↔ViewModel↔ModelModel票名、价格、登录态。负责存储，不负责怎么画。View用户看见的模板。尽量少写业务判断。ViewModel组件实例：连接两边，驱动绑定，更新DOM的是框架。为什么要用MVVM把业务逻辑和视图代码分开，后期更好维护01低耦合View可以独立改样子；一个ViewModel也能绑到不同View。View变，Model可以不变。02可重用视图逻辑放进ViewModel，多个页面复用同一套数据处理。03独立开发开发专注数据和逻辑，设计专注页面；两边不必抢同一段DOM操作。04课上对照jQuery式：找到h1再改innerText。Vue：改soldOut，模板自己显示“已售罄”。对照两种改标题的写法命令式自己找节点；声明式只改数据//命令式document.querySelector('h1').innerText='已售罄'//自己找节点、自己改文字//节点一变，这段就容易失效//声明式soldOut.value=true//模板{{soldOut?'已售罄':title}}//只改数据，视图跟着走课上实验：在组件里改一个ref，保存后看页面变。追问：谁在更新DOM？答案是Vue的响应式和模板编译，不是同学们手写的querySelector。4.1.2渐进式与开发模式按项目需要逐步加能力，不必一次用完全部生态大觅业务较复杂，采用单文件组件+Vite。路由项目已经配好，可在首页组件里先体验Vue3基本用法。Pinia等到项目9再装，这是渐进，不是前后矛盾。