简介基于HTML与Vue的济南旅游网站是一份适合计算机相关专业学生使用的毕业设计/期末大作业资源项目难度适中已通过导师指导与助教审定。源码经过本地编译和严格调试下载后即可运行便于学习者直接对照真实项目理解前后端协同、组件化开发与页面交互逻辑。资源共807个文件压缩包约18.12MB主要包含44个vue组件、156个js脚本、46个css样式、38个html页面及111个java后端代码另有论文、开发文档、数据文档和sql数据库脚本目录结构清晰可快速定位并复用关键模块。目前已有41人学习下载。对正在完成课设、准备毕设答辩或希望积累实战经验的前端与全栈学习者而言这份资料既提供完整可运行的项目骨架也包含从需求设计到文档撰写的全套参考能有效缩短从零搭建系统的时间并辅助理解旅游网站类项目的常用功能与实现思路。1. 这个「html vue」的济南旅游网站zip 里到底装了什么拿到手先别急着解压运行。带「vue」字样的课程设计 zip十有八九不是一个重后端的前台项目而是「一组静态 HTML 页面 Vue 框架整合」的展示型站点。济南旅游网站这类题材内容几乎固定景点列表、美食推荐、行程攻略、景点详情页。页面之间靠 vue-router 切换数据写死在组件或本地 JSON 里没有接口层也不需要数据库。它适合两类人课程设计需要交作业的学生和想用一周把组件化、路由、打包部署摸一遍的前端入门者。对五年以上经验的工程师来说接手这种包真正要确认的只有三件事Vue 是构建版本还是 CDN 引入、有没有启用 vue-router、数据是硬编码在组件里还是抽成了 JSON。这三件事直接决定你改哪个文件、怎么改不炸。用 Vue 做城市旅游站训练的不是业务复杂度而是数据渲染、路由传参、资源路径这三个前端基本功恰好这个项目把坑都占齐了。2. 把静态 HTML 改造成 Vue 组件济南旅游网站的结构设计先理解这个 zip 的演进路径。原始版本大概率是index.html、attraction.html、food.html这类以!doctype html开头的纯静态页面公共导航栏和页脚在每个文件里重复拷贝。Vue 化之后这些「页面」变成了 src 目录下的单文件组件原本的公共部分抽成components里的复用组件。这一步不是可选项而是这个标题里「html vue」两个关键词的分界线HTML 负责语义结构Vue 负责把重复结构变成可复用的组件实例。2.1 index.html 只是入口真正的骨架在 src 里Vue CLI 项目里index.html依然存在但它不再是完整的网页而是退化成模板外壳。打开它你会看到!DOCTYPE html html langzh-CN head meta charsetutf-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title济南旅游/title /head body div idapp/div !-- built files will be auto injected -- /body /html页面里唯一有意义的是div idapp/div。Vue 实例挂载到这个节点上之后所有的 DOM 都由组件接管。判断项目用的是 Vue 2 还是 Vue 3看启动文件src/main.js就行写new Vue({ render: h h(App) }).$mount(#app)的是 Vue 2写createApp(App).mount(#app)的是 Vue 3。这个判断比看 package.json 里的版本号更直接因为很多项目锁文件里的版本早就和实际代码不一致了。目录设计上我一般这样组织一个纯前端的城市旅游站jinan-travel/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ ├── router/ │ │ └── index.js │ ├── data/ │ │ └── attractions.json │ ├── components/ │ │ ├── NavBar.vue │ │ └── SiteFooter.vue │ └── views/ │ ├── Home.vue │ └── Detail.vueviews对应路由级别的页面components里是跨页面复用的片段data目录存放景点数据。这样分层的原因是旅游站的信息结构稳定把数据和视图分离后改文案、换图片不需要碰 .vue 文件。2.2 景点数据放在哪组件 data、JSON 还是接口没有后端时数据只有三个去处。第一是写在组件data()里适合导航菜单这种只被单个组件使用的配置第二是抽成独立的 JSON 文件适合景点列表、美食推荐这类结构化的长数据第三是用provide/inject做跨层共享但旅游站完全用不上。我一般把景点数据统一放在src/data/attractions.json字段按展示需求设计字段类型对应 UI 展示idnumber路由参数详情页定位namestring景点名称标题imagestring列表卡片缩略图summarystring列表页的摘要文字tagsarray卡片上的标签人文、自然、必打卡pricenumber门票价格展示hoursstring开放时间把数据抽成 JSON 还有一个好处后续如果要接后端只需把import attractions from /data/attractions.json换成axios.get(/api/attractions)组件代码不用改。这种替换方式能让课程设计答辩时多一个亮点你的代码是「面向接口」写的。2.3 用 v-for v-bind 渲染景点卡片列表列表渲染是这个项目最核心的 Vue 语法。以济南景点列表为例常见的写法是这样template div classattraction-grid router-link v-foritem in scenicList :keyitem.id :to{ name: detail, params: { id: item.id } } classattraction-card img :srcitem.image :altitem.name loadinglazy / h3{{ item.name }}/h3 p{{ item.summary }}/p span classtag v-fortag in item.tags :keytag{{ tag }}/span /router-link /div /template script import attractions from /data/attractions.json export default { name: AttractionGrid, data() { return { scenicList: attractions } } } /script这段代码有三处需要说明。第一:keyitem.id必须用稳定且唯一的 id不能用数组 index。因为当列表发生增删或过滤时Vue 通过 key 判断哪些节点可以复用用 index 会导致组件内部状态比如展开详情、图片加载状态串到错误的元素上。第二:to用对象写法并指定命名路由name: detail比手写:to/detail/ item.id更安全路由路径调整时不需要改模板。第三图片加了loadinglazy景点站通常图片多、单图体积大懒加载对首屏速度的提升在这个场景下立竿见影。3. 用 Vue 在本地跑通济南旅游网站环境、命令与白屏排错zip 包解压后最常遇到的问题不是代码 bug而是跑不起来。原因基本集中在 Node 环境版本、依赖安装不完整、启动命令用错这三个环节。这一章直接给你一套从环境检查到跑通的最小操作序列。3.1 环境准备Vue 安装及环境配置的必要检查先看包根目录有没有package-lock.json或yarn.lock。有 lock 文件说明依赖版本被锁定过优先用对应的包管理器安装能少踩很多依赖冲突的坑。然后检查 Node 环境node -v npm -v很多课程设计项目是在旧版 Node 下生成的如果你本机是最新 Node 版本安装依赖时可能出现node-sass编译报错或者 OpenSSL 相关的ERR_OSSL_EVP_UNSUPPORTED。这种问题的修复思路不是降级 Node而是把node-sass替换成dart-sass或者升级项目中 vue-cli-service 的版本。不做硬性的版本推荐因为每个包的依赖树不同替换前先看package.json里有没有sass-loader是它和 Node 版本在打架。依赖安装命令按 lock 文件选择通常跑这两个npm install npx vue-cli-service servenpm install会依据 package.json 拉取依赖到 node_modulesnpx vue-cli-service serve启动开发服务器。这里有个细节直接用npm run serve也能启动但npm run会先去找 package.json 的 scripts 字段如果 scripts 里不是vue-cli-service serve而是vite说明这是 Vite 项目启动命令要改成npm run dev。判断方法很简单看 scripts 段落里写了什么。3.2 启动后的端口、访问与常用命令Vue CLI 默认开发端口是 8080被占用时会在终端提示换到 8081 或让你选择。手动指定端口可以这样npx vue-cli-service serve --port 8090这套项目的常规命令整理如下基本覆盖整个生命周期命令作用备注npm install安装依赖首次运行必须npm run serve启动开发服务器热更新适合开发调试npm run build打包到 dist 目录生产部署用npm run lint检查代码规范报错可以先忽略启动后终端显示App running at: http://localhost:8080浏览器打开即可。如果自动打开了浏览器但页面空白先别改代码按下面顺序排查。3.3 页面白屏的三层排查顺序白屏问题我一般按「控制台报错 → 资源加载 → 挂载节点」三层查而不是上来就改 Vue 配置。第一层看浏览器 F12 的 Console。最常见的报错是Cannot find element: #app意思是 JS 执行时找不到挂载节点。原因通常是 index.html 里 id 拼写错误或者 main.js 在 DOM 结构加载完成前执行了。第二层看 Network 面板重点确认app.js、chunk-vendors.js这些资源是 200 还是 404。如果是 404问题出在 publicPath 配置这个在第 5 章专门讲。第三层检查 main.js 是否真的引入了根组件漏掉import App from ./App.vue时页面也能白屏因为什么都没渲染。一个容易被忽略的点如果项目里用了router-view但所有路由都没显示先确认是否在createRouter之前调用了app.use(router)。这个顺序错了控制台会报router-view未定义或者根本没有报错但页面就是空白。这类纯前端项目没有后端日志可看排查全靠浏览器开发者工具所以 Console 面板的报错永远是第一处理对象。4. vue-router 下的济南旅游网站页面跳转与路由参数传递旅游网站的核心交互是「从列表页点进详情页」这背后就是整套 vue-router 的参数传递机制。景点列表、美食页面、攻略页本质上都是同一种模式列表集合 → 点击某一项 → 将 id 传给详情页 → 详情页根据 id 渲染对应数据。4.1 路由表配置静态路由与动态路由路由配置文件src/router/index.js是页面的总览表。一个济南旅游站至少要有首页、景点详情、美食、攻略四个路由。其中详情页是动态路由因为它的路径带参数import Vue from vue import VueRouter from vue-router import Home from /views/Home.vue import Detail from /views/Detail.vue import Food from /views/Food.vue import Track from /views/Track.vue Vue.use(VueRouter) const routes [ { path: /, name: home, component: Home }, { path: /detail/:id, name: detail, component: Detail, meta: { title: 景点详情 } }, { path: /food, name: food, component: Food }, { path: /track, name: track, component: Track } ] const router new VueRouter({ mode: hash, routes }) export default router:id是动态路径参数它把「详情页」这一套组件复用到所有景点上。访问/detail/1和/detail/2时Vue 会复用同一个 Detail 组件实例只把$route.params.id的值从 1 换成 2。这里容易踩一个坑组件复用时created钩子不会重新触发需要在详情页里通过watch$route.params.id的变化来重新拉取数据否则从趵突泉详情页跳到千佛山详情页页面内容不会刷新。4.2 详情页接收路由参数的写法与刷新差异在列表页跳转时参数传递有两条路可走// 方式一命名路由 params路径 /detail/3 this.$router.push({ name: detail, params: { id: 3 } }) // 方式二路径 query路径 /detail/4?fromhome this.$router.push({ path: /detail/4, query: { from: home } })两种方式都能到达详情页但语义和刷新表现不同对比项paramsquery是否出现在 URL 路径中是否刷新后数据是否保留保留保留适用场景必传的业务 id页面的来源标记、搜索条件query更适合传fromhome这种辅助信息页面刷新不丢又不需要调整路由表。而景点 id 这类数据用params放在:id里URL 可读性更好也方便直接通过地址访问特定详情页。详情页内读取参数Vue 2 用的是this.$route.params.idVue 3 组合式 API 里改用useRoute().params.id。接管旧项目的第一件事就是全局搜一下代码里用的是this.$route还是useRoute这决定了你要按哪套语法改。4.3 滚动位置维护与导航高亮旅游网站页面普遍偏长从详情页返回列表时滚动位置重置到顶部是默认行为但体验很糟糕。vue-router 提供scrollBehavior来解决const router new VueRouter({ routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } return { top: 0 } } })savedPosition在用户通过浏览器后退按钮返回时才有值它记录的是离开页面时的滚动位置。而通过router-link从列表点进详情再返回时savedPosition 为空会执行return { top: 0 }回到顶部。这个细节是页面组件里mounted滚动监听替代不了的因为它在路由层面统一处理。导航高亮是另一个容易被忽视的点。默认情况下路由匹配会让router-link自动加上router-link-active类但这个类在「包含匹配」时就会加上。比如路径/会同时匹配首页和所有以/开头的路径导致首页导航一直高亮。解决方式是设置exact-active-class或给根路径的路由加上exact属性。5. 济南旅游网站打包后图片 404 与路由白屏的 3 个修复参数npm run build之后dist 目录就是可部署的静态文件。但很多人把 dist 直接丢到服务器子目录打开就发现图片全挂、路由白屏。这不是代码质量问题是打包路径和路由模式没有适配部署环境。先修图片 404。Vue CLI 打包时默认 publicPath 是/资源会被加载成/static/img/xx.jpg。部署在域名根目录没问题放在http://xxx.com/jinan/子目录下就全部 404。修改项目根目录的vue.config.jsmodule.exports { publicPath: process.env.NODE_ENV production ? ./ : /, assetsDir: static }publicPath: ./让打包后的资源引用变成相对路径。开发环境用/保持 dev server 正常生产环境用相对路径适配任意子目录。这是打包后布局异常的第一修复参数。第二个参数是路由模式。开发服务器对任何请求都回退到 index.html所以mode: history在本地没问题但生产环境如果是纯静态托管访问/detail/3时服务器找不到这个文件就会返回 404。修复方式是把路由模式改回mode: hashURL 变成/#/detail/3hash 部分不会发送到服务器天然避免刷新白屏。如果能控制 Nginx 配置也可以用 history 模式配合try_files $uri $uri/ /index.html;回退但改一行代码的成本远低于改服务器配置。第三个参数是图片资源的引用方式。放在src/assets里的图片必须用import引入或走相对路径打包时才会被处理并加上 hash放在public目录的图片会原样拷贝引用时要写成绝对路径/img/xx.jpg。混用两种方式最容易出现部分图片能显示、部分挂掉的诡异现象。验证这三个修复是否生效不需要部署到远程服务器。在 dist 目录跑npx serve启动本地静态服务器浏览器用无痕窗口访问逐个路由刷新并检查 Console 的 404 记录。最后改掉 index.html 里的title不再让它显示 Vue CLI 的默认标题站点才算真正交付。本文还有配套的精品资源点击获取