项目4：“古典文学网”前端框架解析及开发.pptx

项目4：“古典文学网”

前端框架解析及开发

目录01.06.拓展任务02.知识储备04.技能拓展项目描述03.项目任务05.项目总结

学习目标知识目标：了解Vue项目结构及特点，掌握Vue项目的整体框架结构；了解Vue框架的模板语法与响应式基础，掌握它们的核心原理和应用方法；了解Vue框架的事件监听与表单绑定，掌握其如何捕捉和处理用户交互事件；了解Vue框架的计算属性和侦听器，掌握其如何在应用中处理复杂逻辑和动态数据；了解Vue框架的路由和状态管理，掌握如何构建结构清晰、易于维护的前端应用。能力目标：通过学习模板语法与响应式基础，能够应用其提升开发效率与项目质量；通过学习事件监听与表单绑定，能够为项目开发数据交互功能；通过学习计算属性和侦听器，能够为项目开发高效的数据处理功能；通过学习路由和状态管理，能够为项目开发高效路由功能及状态管理功能。素质目标：培养系统思维，严格遵守行业规范和标准，提高软件质量和可靠性；培养责任感、职业精神和团队精神，遵守职业道德

01项目描述

1.项目描述小白已经熟练掌握了项目后端API接口开发的完整流程，现在，他计划进一步深入研究Vue框架技术，以设计出前端项目的整体架构，并开发“古典文学网”的“首页”“注册页”和“登录页”的路由功能。此外，他还将为项目增添跨域访问功能以及身份验证的Token管理功能。

02知识储备

2.知识储备为了项目的顺利开发，小白需要学习Vue框架技术，包括项目架构、模板语法、响应式基础、事件监听机制、计算属性应用、侦听器原理、路由配置以及状态管理策略等关键技术点。

2.1.Vue程序框架解析我们将选取Vue3.x作为“古典文学网”前端的核心框架技术，并且深入探讨Vue3.x的一些核心技术，以便更好地理解和应用这一强大的前端框架。

2.1.Vue程序框架解析1.Vue项目布局Vue3的项目布局与Vue2相比，虽然大体上并没有显著的差异，但确实引入了一些全新的特性和建议的最佳实践。以下是一个典型的Vue3项目布局示例。

D:/Projects/hivue├──node_modules/├──public/│└──favicon.ico├──src/│├──assets/│├──components/│├──router/│├──store/│├──views/│├──App.vue│└──main.js├──tests/├──index.html├──jsconfig.json├──package.json├──README.md└──vite.config.js

2.1.Vue程序框架解析1.Vue项目布局该目录中的目录/文件相关说明见表所示。目录/文件说明node_modules/npm加载的项目依赖模块public/公共资源目录，存放了与业务逻辑无关的静态资源public/favicon.ico网站图标src/assets/静态资源目录，用于存放应用程序使用的静态资源文件，例如图片、样式表等src/components/组件目录，按照功能或类别划分存放单文件组件（.vue文件）src/router/路由配置目录，用于定义应用程序的路由配置src/store/状态管理目录，用于管理应用程序的状态src/views/目录用于存放应用程序的页面级组件src/App.vue应用程序的根组件，它包含了应用程序的整体布局和结构src/main.js应用程序入口脚本，用于初始化Vue3应用程序和配置一些全局设置tests/测试相关文件目录，存放单元测试、集成测试等代码index.html应用程序入口HTML文件，Vue应用将挂载于此文件中的特定元素上jsconfig.jsonJavaScript项目的核心配置文件package.json项目的配置文件，包含了项目的元信息、脚本命令、依赖列表等README.md项目的说明文档。vite.config.jsVite构建工具的配置文件，用于Vite的构建行为

2.1.Vue程序框架解析1.Vue项目布局接下来，我们打开在项目1中的“1.3.4.开发‘hivue’前端项目”小节所创建的“hivue”项目。通过对这个项目的分析，我们将探讨在Vue项目中如何创建一个应用实例。我们打开“hivue”项目中的“/src/main.js”文件，从该文件的代码可以看出每个Vue应用都是通过createApp函数创建一个应用实例，该函数传入的App对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。关键代码如下所示：import{creat