前言

前端工程化是商业Web项目前端开发的常用方式。它通过制定一系列的规范，借助工具和框架，解决前端开发以及前后端协作过程中的痛点和难点。Vue.js是一套应用于前端工程化开发的框架。作为全球三大前端框架之一，Vue.js因其轻量级、易学易用而备受开发者青睐，它在国内的应用日趋广泛。

本书分为11个单元，从基础功能应用到工程化项目实现，深入浅出地介绍了Vue.js框架的主要功能和应用方法。前10个单元均安排应用实践和同步训练环节，引导读者交替进行学与练，逐步深入理解知识点，积累实践经验，最终具备工程化项目的开发能力。

为体现党的二十大精神，本书以我国传统文化为背景，设计“历史名城游”和“图片素材库”两个网站项目，前者主要用于应用实践环节，后者则作为工程化项目实战的项目原型。

在内容阐述方面，本书在讲解单元2至单元9的基础应用时，采用原生HTML的开发方式，将知识点的讲解与应用有机结合，通过应用实践环节的训练，让读者能够快速掌握相关技术；本书在讲解单元10和单元11的工程化项目开发时，借助快速构建工具，引入前端工程化概念，展现完整的系统性开发过程，帮助读者建立完整的知识链，提升实战开发能力。

本书建议授课学时为60个学时，具体分配情况如下所示。

本书的内容结构如下。

单元1：介绍Vue.js 3的基础知识，内容包括前端开发模式的演变历程、Vue.js的核心思想和主要特性、Vue.js开发的相关工具，以及如何安装开发和调试工具。

单元2：基础语法的相关知识，内容包括剖析Vue应用程序、数据绑定、流程控制、事件处理、计算属性和数据监听器等。

单元3和单元4：介绍组件的相关知识，内容包括组件定义和注册、组件间数据传递、组件事件的监听与处理、生命周期钩子函数，以及Teleport组件的应用等。

单元5：介绍过渡和动画的相关知识，内容包括过渡和动画的概念、使用Transition组件实现过渡和动画效果、使用钩子函数实现过渡和动画效果，以及使用Transition Group组件实现列表过渡效果等。

单元6：介绍Vue.js 3的新特性——组合式API的相关知识，内容包括组合式API的特点、setup函数、响应性API的应用，以及provide/inject响应式传值等。

单元7：介绍如何通过axios实现与后端的交互，内容包括异步编程、axios的安装与配置、axios处理HTTP请求，以及axios拦截器的创建与应用等。

单元8：介绍如何利用Vue Router管理前端路由，内容包括Vue Router的安装与使用，利用路由属性定义嵌套路由、命名路由和命名视图，动态路由的实现方法，导航守卫的应用等。

单元9：介绍如何利用Vuex管理共享状态，内容包括状态管理模式、Vuex的安装与使用、Vuex的核心属性等。

单元10：介绍如何使用工具构建工程化的Vue项目，内容包括Vue CLI工具的安装与使用，工程化项目的创建、打包和运行，单文件组件的使用，新一代构建工具Vite的基本用法，Element Plus组件库的应用等。

单元11：介绍典型Web应用系统的设计与实现过程。“图片素材库网站”项目包含前端子项目和后端子项目，配套项目源码，让读者体验完整的开发过程。该单元内容包括项目设计流程、项目构建步骤、组件的设计与实现、前端和后端主要功能的实现、项目的部署与运行等。

为方便教学，读者可登录人邮教育社区（www.ryjiaoyu.com）下载本书源代码、教学PPT、教案等资源。

本书由广东轻工职业技术学院古凌岚、肖蓉和袁宜英编著，广东华际友天信息科技有限公司唐子明参与编写，古凌岚负责全书的统编工作。

由于编者水平有限，书中难免有不妥之处，请广大读者批评指正。如有任何疑问，读者可发电子邮件至1999106010@gdip.edu.cn，以便教材的后续修改。

编者
2023年12月