Vue企业开发实战（第2版）-课件 项目1 大觅项目架构设计

《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(