Vu基础及其开发3

第七章VueCLI脚手架的使用学习目标熟悉模块化开发和构建Vue项目所必须的环境准备能够使用VueCLI进行构建Vue的项目熟练Vue单页面应用和单文件组件的开发熟练VueCLI构建工具的使用熟悉新型构建工具Vite的使用如今，应用程序的开发通常采用前后端分离的模式。这要求前端能够独立构建、运行和部署，同时进行测试。传统的多页面应用模式存在一些缺陷，如资源的重复加载和页面跳转需要刷新页面等问题。因此，单页面应用（SPA）和单文件组件成为了Vue应用开发的首选。为了快速搭建和构建Vue应用，VueCLI成为了一个强大的构建工具。模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具模板化开发在前端开发的早期，JavaScript的使用存在许多局限性和缺陷。在那时，我们通常通过在HTML文件中使用<script>标签来编写逻辑代码。然而，那时的JavaScript还没有引入块级作用域、类、模块等概念。随着前端业务逻辑的日益复杂，许多问题逐渐浮现出来。其中包括代码无法复用、缺乏模块之间的相互依赖、全局变量命名容易冲突和变量污染，以及代码组织混乱等问题，这些问题使得后期的维护变得困难。为了解决这些问题，一些开发团队尝试针对其中的一两个问题提出解决方案。然而，这些解决方案无法很好地解决所有问题，直到模块化概念的提出。模块化指的是将一个复杂的程序按照一定的规范分成几个文件模块，每一个模块都封装具有特定的功能，模块内部的数据都是私有的，但是可以通过向外暴露接口的方式供外部访问，模块之间可以互相引用使用。通过模块化，可以将代码分割成独立的模块，模块之间可以相互引用和依赖，从而提高代码的可维护性和复用性。另外，由于模块化的引入，每个模块可以定义自己的作用域，即使不同模块中存在命名冲突，也不会影响它们的引用。这使得代码的依赖关系更加清晰明了，代码的的扩展性也大大增强。在JavaScript早期，由于缺乏官方的模块化标准，出现了许多模块化规范。其中比较知名的包括CommonJS和AMD。

模板化开发1．CommonJS规范随着Node.js的出现，JavaScript的代码可以在服务器端运行，并且随着业务逻辑的复杂化，模块化开发变得越发必要。为了解决模块化的问题，CommonJS社区制定了一套模块化规范，专门用于Node.js服务器端的开发。CommonJS模块化规范定义了如何导入和导出模块，通过require和module.exports语法实现模块之间的依赖管理。CommonJS规范主要特点如下：每个文件就是一个模块，模块都有自己的作用域。在文件里面定义的变量、函数、类都是私有的，对其他文件不可见。每个模块内部可以使用require和module，require用来加载模块，module代表当前对象每个模块通过exports和module.exports暴露属性供外部使用CommonJS采用同步加载模块的机制，即只有当前模块加载完毕后才能执行后续操作。在Node.js服务器端编程中，由于模块文件通常存储在本地，模块加载速度较快，因此同步加载的机制比较适合服务器的开发。模板化开发2．AMD规范由于浏览器端需要通过网络请求加载文件，所以浏览器加载文件的过程通常是异步执行的，以便能够快速展示页面内容。相比之下，CommonJS规范的同步加载模块机制并不适合浏览器端的开发需求。为了解决这个问题，RequireJS提出了一种异步加载模块的规范，即AMD（AsynchronousModuleDefinition）。AMD规范的主要特点如下：通过define来定义一个模块供外部使用通过require来引入模块。异步模块加载机制，模块的加载不会影响后面操作的执行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。AMD规范允许开发人员在浏览器端以异步方式加载模块，避免了阻塞页面渲染的问题，并且可以根据需要按需加载模块，提高了页面的加载速度和性能。模板化开发3．ESModule规范ESModule（ESM）是ECMAScript2015（ES6）引入的官方模块规范，用于在JavaScript中定义和加载模块。ESModule提供了一种标准化的方式来组织、共享和重用JavaScript代码。ESModule规范的主要特点如下：（1）通过给<script>标签加上type="module"属性，可以执行ESModules的标准规范，既可以在标签内写模块化的JavaScript代码，也可以引入外部的JavaScript文件。（2）ESModule自动采用严格模式，即自动添加了“usestrict”。严格模式下，this的指向为undefined。（3）每个ESModule都是运行在单独的作用域中，作用域中的数据为私有数据，不会污染全局作用域。（4）通过export关键字导出模块，通过import关键字导入模块。（5）如果要在ESModules中请求外部的JavaScript文件，并且不在同源地址下（跨域），需要确保所请求的服务端地址提供了CORS标头。（6）模块化的<script>标签会延迟执行脚本，相当于给<script>标签添加了defer属性。模板化开发下面来看下使用ESModule规范的案例。模板化开发模板化开发在JavaScript文件中，可以按需导出属性，即在属性前面加上export关键字。也可以使用exportdefault关键字来统一定义要导出的属性。在使用import引入模块时，可以使用ES6解构的方式按需引入属性。在模块化中引入外部js文件，通常需要通过CORS跨域来完成。如果直接在浏览器中打开HTML文件，并使用本地路径进行引入，可能会出现跨域错误。为了解决这个问题，可以在VSCode中安装"LiveServer"插件，"LiveServer"会以项目的方式运行网页，网页中引入的外部JavaScript文件将使用同一域的地址，避免了跨域错误。"LiveServer"插件的安装，如图所示。安装上插件之后，在需要运行的HTML文件中，右击中选择“OpenwithLiveServer”或点击右脚下“GoLive”即可运行。如果想要停止运行，在右击弹出的菜单中，选择“StopLiveServer”即可。模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具环境准备在使用VueCLI之前，开发者需要准备一些必要的依赖环境。除了需要安装构建Vue项目所依赖的Node环境，还需要安装npm或yarn等工具。此外，VueCLI还依赖于Webpack环境。接下来，我们将介绍如何安装和使用这些环境。1．Node.js环境准备Node.js是一个基于Google开发的ChromeV8引擎的JavaScript运行环境，它允许我们在服务器端运行JavaScript代码。Node.js本身就是用JavaScript语言编写的，并采用了CommonJS规范进行模块化开发。简而言之，Node.js使我们能够使用JavaScript进行服务器端开发，并且利用JavaScript在浏览器中运行的特性，实现跨平台的运行能力。Node.js内置了许多适用于服务器端开发的核心模块，例如http网络请求模块，fs文件操作模块，url路径处理模块等。除了这些核心模块，Node.js还提供了丰富的第三方工具和库，其中包括了NPM包管理工具。在使用VueCLI和开发Vue项目时，Node.js和NPM是必要的工具和环境。环境准备大多数操作系统并没有默认安装Node.js环境，所以需要开发者手动下载和安装Node.js。安装Node.js的步骤如下：①打开Node.js的官网，并下载合适版本的Node.js。值得注意的是，VueCLI的高版本需要更高的Node.js版本支持，通常建议使用10及以上版本的Node.js。在本书中，使用的是官网提供的LTS稳定版本18.12.1，如图所示。环境准备②双击下载好的安装包，按照默认的提示点击“Next”直到“Install”安装即可。③安装完成之后，在cmd、Terminal等命令行工具中输入“node-v”，可以查看到node的版本号，表示安装成功，如图所示。环境准备2．NPM和Yarn包管理工具NPM（NodePackageManager）是Node.js的包管理工具，用于管理插件包的下载安装、更新、卸载、依赖管理等操作。当安装Node.js时，NPM会自动安装并成为Node.js的一部分，因此只要安装了Node.js环境就可以直接在命令行工具中使用NPM的命令。NPM允许开发者从NPM服务器获取第三方包或命令程序并将其下载安装到本地，同时也可以将开发者自己编写的包或命令程序上传到NPM服务器以供其他开发者使用。NPM提供了一些简单便捷的操作命令，让我们能够快速管理第三方模块。NPM常用命令如表所示。命令说明npm-v查看NPM版本号npminstall包名安装依赖包，并放在./node_modules下，如果没有则会自动创建文件npminstall根据项目的package.json文件，安装项目所有的第三方依赖包npminstall包名--save-dev(或-D)安装的依赖包只用于开发环境，–save参数表示自动修改package.json文件，自动添加依赖项npminstall包名--save(或-S)安装的依赖包需要发布到生产环境npminstall-g包名全局安装依赖包，放在系统路径或node安装目录下的node_modules文件中，全局安装的依赖包可以直接在命令行中使用npmuninstall包名卸载依赖包npmupdate包名更新指定依赖包npminit初始化并生产一个package.json配置文件npmlist/npmlist-g查看当前/全局安装了那些依赖包npmrunbuild项目打包npmrun运行package.json中的scripts脚本环境准备默认情况下，NPM会从NPM服务器下载依赖包。然而，在国内访问NPM服务器的速度通常较慢，这可能导致频繁的下载失败问题。在这种情况下，有两种方法可以解决：一种是安装使用cnpm命令，另一种是将NPM源设置为国内的镜像，以加速依赖包的下载。这里我们使用设置NPM为淘宝镜像的方式，执行如下的命令：设置完之后，可以通过“npmgetregistry”查看当前的镜像是否设置成功。尽管NPM在包管理方面提供了很大的便利，但在早期阶段它也存在一些缺陷，例如不支持离线模式、下载速度较慢以及同一项目中安装包时可能出现版本不一致的问题。为了解决这些问题，Facebook等团队推出了一款名为Yarn的新包管理工具，旨在取代NPM。初期推出时，Yarn确实受到了很多开发者的喜爱。然而，随后NPM团队通过迅速实现所缺失的功能来弥补NPM的缺陷，使得目前两者的区别并不大。yarn的安装也是借助于npm来实现的，如下：npminstall-gcnpm--registry=#使用淘宝镜像npmconfigsetregistrynpminstall-gyarn环境准备安装了yarn之后，就可以使用一些yarn的命令了，常用的命令如表所示。命令说明yarn-v查看yarn的版本yarninit等同于“npminit”yarnadd包名在项目中添加一个依赖包yarnadd包名--dev等同于“npminstall包名--save-dev”yarnglobaladd包名等同于“npminstall-g包名”yarnupgrade等同于“npmupdate”yarnremove等同于“npmuninstall”yarn/yarninstall等同于“npminstall”，安装项目中所有依赖yarnlist等同于“npmlist”环境准备3．Webpack介绍学习了模块化开发后，我们了解到JavaScript模块之间可以相互依赖和使用。当一个页面中引入了多个JavaScript文件，并且这些文件之间可能存在相互依赖关系时，在加载这些文件时需要考虑它们的请求顺序。如果加载顺序有误或由于网络问题导致加载失败，就需要手动进行维护。随着项目规模的增大，这样的JavaScript文件可能会增加到几十甚至上百个，维护这么多模块依赖关系变得非常困难。如果能够在开发过程中仍然使用多个JavaScript模块依赖，开发完成后可以将它们合并到一起。在这个过程中，会有一个内部维护依赖关系图的步骤，用于管理打包前的模块依赖关系。通过这种模块打包操作，就可以有效地解决依赖维护的难题。webpack就是这样一个用于现代JavaScript应用程序的静态模块打包工具。Webpack不仅仅支持js的模块依赖打包，还包括sass、css、jpg、png等静态资源的构建，如图所示。环境准备当Webpack处理应用程序时，它会根据命令行参数或配置文件中定义的模块列表开始处理。从入口点（entrypoints）开始，Webpack会递归地构建一个依赖关系图，其中包含应用程序所需的每个模块。然后，Webpack将所有这些模块打包成少量的bundle，这些bundle都是静态资源，可以直接由浏览器加载并显示其内容。下面来介绍下webpack的几个核心概念。入口(entry)entry会指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。入口默认值是“./src/index.js，”，如果想要修改，可以在webpack的配置（通常为“webpack.config.js”）中修改entry属性。环境准备输出(output)output选项用来告知webpack如何向硬盘写入编译文件，输出主要配置打包生成的输出文件名以及生成的路径，输出的出口只能有一个。LoaderWebpack只能解析JavaScript和JSON文件，但在开发中并不仅限于这些文件类型。我们还需要处理CSS、图片以及将ES6或TypeScript转换为ES5的代码等文件类型。为了使它们能够被Webpack有效地处理，我们需要使用Loader将它们转换为可用的模块。例如，如果想要加载CSS文件，就需要借助于css-loader。当然，前提是需要使用npm安装css-loader的依赖，安装命令为“npminstall--save-devcss-loader”。安装之后就可以把css-loader应用到webpack中。环境准备插件（plugin）插件是对webpack中功能进行扩展。loader是用于模块类型的转换，而插件则可以用于执行范围更广的任务，例如：打包优化，资源管理，文件压缩等。使用插件的时候需要通过require()加载，然后把插件对象添加到plugins数组中即可。下面以HTML插件为例。环境准备模式（mode）webpack中可以通过mode选择不同的模式，设置mode选项值为development,production或none，就可以启用webpack内置在相应环境下的优化。其不同模式的优化，如表所示。此外，webpack还支持module.exports为数组对象配置多个target，也支持使用多种编程语言和数据描述格式来编写配置文件等功能。选项描述development开发模式，会将DefinePlugin中process.env.NODE_ENV的值设置为development.为模块和chunk启用有效的名。production生产模式，默认值。会将DefinePlugin中process.env.NODE_ENV的值设置为production。为模块和chunk启用确定性的混淆名称。none不使用任何默认优化选项模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具VueCLI的基本使用在使用Vue开发项目时，一开始就需要进行许多准备工作，例如创建项目目录结构、配置项目的打包和部署方式、编写代码单元测试等一系列操作。如果每次都要手动完成这些操作，无疑会降低开发效率。因此，我们可以借助一些工具来自动化这些步骤，这些工具被称为脚手架。VueCLI（CommandLineInterface）是一个基于Vue进行快速开发的项目脚手架。它可以让开发者实现零配置的原型开发，它提供一个基于webpack构建，并带有合理的默认配置，可进行项目配置的运行时依赖。并且它还提供了丰富的插件，可以更好的帮助完成项目的开发。VueCLI由以下三部分组成：@vue/cli：一个全局的npm依赖包，它提供了快速构建Vue项目的能力。通过使用命令"vuecreate"，我们可以轻松创建Vue项目。此外，@vue/cli还提供了一个图形化界面的项目构建方式，通过命令"vueui"可以启动一个可视化界面，用于管理所有的项目。VueCLI的基本使用@vue/cli-service：CLI服务，它是一个局部的开发环境依赖包。提供了CLI插件的核心服务以及经过优化过的内部的webpack配置；并且为vue项目内部提供了serve、build和inspect命令，实现了对项目的运行、打包、导出webpack配置信息功能；CLI插件：是以“@vue/cli-plugin-”或“vue-cli-plugin-”开头的依赖包，为Vue项目提供扩展功能，如Babel/TypeScript转译、ESLint集成、单元测试等；VueCLI的基本使用1．VueCLI的安装要使用VueCLI，需要先通过npm或yarn安装它。使用NPM安装：使用Yarn安装：安装成功后，就可以在命令行中执行vue命令。可以通过查看vue版本号的命令来检验VueCLI是否安装成功，如下：当命令行中显示了VueCLI的版本号说明VueCLI已经安装成功。如果之前安装过CLI，但是版本太低需要升级的话，可以执行如下命令：或者

npminstall-g@vue/cliyarnglobaladd@vue/clivue--versionnpmupdate-g@vue/cliyarnglobalupgrade--latest@vue/cliVueCLI的基本使用2．VueCLI创建web项目命令创建使用“vuecreate”就可以快速创建一个名为hello-world的Vue项目，执行指令如下：执行指令后，将进入Vue项目创建的选择模式。VueCLI提供了几种选择：Default开头的默认项目模板、手动选择模板（Manuallyselectfeatures）以及保存过的自定义模板。这里我们选择Vue3的默认模板，如图所示。

vuecreatehello-worldVueCLI的基本使用上图中Vue3默认模板中的依赖包除了提供Vue3的外，还提供了Babel和ESLint依赖。Babel可以让开发者在项目中使用一些最新的ES语法和API。并且Babel可以通过将ES新语法的代码转换为向后兼容的低版本JavaScript代码，确保代码可以在不支持这些新特性的浏览器中正常运行。在VueCLI创建的默认项目中，默认提供了Babel的支持。开发者可以在项目中使用最新的JavaScript语法，而无需担心浏览器的兼容性问题。ESLint是一个语法规则和代码风格的检查工具，它可以帮助开发者确保代码的语法正确性和格式统一性。ESLint可以在开发过程中检测和标记出常见的语法错误，以及对代码风格进行规范检查。通过使用ESLint，可以避免一些常见的语法错误，并确保代码具有一致的格式和可读性；也可以及早发现并修复潜在的问题，从而提高代码的质量和可维护性。选择模板后，按回车键即可开始创建，当看到页面中出现“Successfullycreatedproject”字样时，表示创建项目成功。VueCLI的基本使用图形化界面创建除了命令创建外，开发者也可以图形化界面的方式创建和管理项目。执行命令：执行命令之后，会自动打开项目管理页面，默认vueui的界面是英文的，读者可以借助于浏览器自带的翻译功能翻译成汉语，这样使用起来更加的方便。如图所示。vueuiVueCLI的基本使用选择“创建”选项，然后点击“在此创建新项目”，进入创建项目选项，如图所示。VueCLI的基本使用然后选择创建项目的模板，即可开始创建，如图所示。VueCLI的基本使用创建成功之后即可进行项目的管理，如图7-9所示。总的来说，使用命令行创建Vue项目是一种快速的方式，而使用图形化界面（UI）则更方便进行项目管理。VueCLI的基本使用在VSCode中打开项目创建好的Vue项目，我们可以使用VSCode软件进行开发。要将项目导入到VSCode中，操作非常的简单。只需要在菜单栏中选择“文件”→“打开文件夹”，然后在文件浏览器中，选择您的Vue项目所在的文件夹即可。VueCLI的基本使用3．项目结构打开创建好的“hello-world”工程，可以看到vue项目的项目结构，如图所示。VueCLI的基本使用node_modules目录是通过NPM安装的依赖包的存放位置。在Vue项目中，使用npminstall或npmuninstall命令会自动更新node_modules目录的内容。打开node_modules目录，可以发现在默认创建的项目中安装了许多项目所需的依赖包，其中也包括Vue及其相关的依赖包。这些依赖包是项目所依赖的核心库，它们提供了Vue框架的功能和扩展。如图所示。VueCLI的基本使用node_modules目录是通过NPM安装的依赖包的存放位置。在Vue项目中，使用npminstall或npmuninstall命令会自动更新node_modules目录的内容。打开node_modules目录，可以发现在默认创建的项目中安装了许多项目所需的依赖包，其中也包括Vue及其相关的依赖包。这些依赖包是项目所依赖的核心库，它们提供了Vue框架的功能和扩展。如图所示。

通常node_modules目录都会很大，因此在拷贝项目或将项目上传至Git仓库时，一般会忽略node_modules目录。如果获取的项目中没有node_modules目录，只需要重新下载并添加所有的依赖包即可（使用命令“npminstall”）。VueCLI的基本使用public是一个公共资源存放目录，并且这类资源不会通过webpack处理，而是在打包的时候直接进行拷贝操作。这些资源包括页面图标、静态的HTML页面等，默认包含了项目的网页图标favicon.ico和index.html。需要注意的是，使用VueCLI创建的项目是基于Vue单页面应用进行开发的。因此，index.html文件是整个网页的入口文件。在index.html中，一般只会对一些元信息进行修改。VueCLI的基本使用src是项目开发核心代码的存储目录，src中默认有assets目录、components目录、App.vue和main.js文件。assets用于存放项目的资源文件，如CSS样式、图片等。。components是用来存放Vue公共组件的目录。默认目录下有一个HelloWorld.vue组件，通常会创建一个views目录用来存放项目相关的页面组件。App.vue项目的默认首页，是一个根组件的单文件组件。在该文件中，可以配置一些全局样式或加载其他组件。默认情况下，App.vue中已经包含了一些简单样式，并且加载了HelloWorld组件。main.js是项目的入口文件。main.js主要用来初始vue的实例或者安装一些项目所需的插件。VueCLI的基本使用.gitignore是项目进行上传到git或从git拉取代码时所忽略的文件清单，vue项目在提交的时候很多文件都是不需要上传到git的，如node_modules目录、项目打包生成的资源目录dist以及各种日志文件等；babel.config.js是babel的配置文件。jsconfig.json用来配置JavaScript编译时的配置选项，它可以对项目中所有的js代码做出个性化的支持，如指定js的编译目标版本、项目路径问题等。如果是基于TypeScript的项目也会有同样功能的tsconfig.json。package.json是项目的表述文件，它采用JSON格式，用于描述项目的元数据和依赖项。 VueCLI的基本使用package.json中常见的配置项如下：项目的基本信息：包括项目名称name、版本号version等信息。scripts：用于定义可执行的脚本命令，可以通过npmrun命令来执行这些脚本，如“npmrunserve”。依赖模块：在项目中，有两种类型的依赖模块:运行时依赖模块（dependencies）和开发时依赖模块（devDependencies）。dependencies中的依赖模块是项目在运行时所需的模块，包括项目的核心功能模块或第三方库等。devDependencies中的依赖模块是在开发过程中需要的辅助工具、测试框架、构建工具等，这些模块通常不会被包含在最终的生产环境中。使用npminstall--save命令可以将模块安装为运行时依赖,使用npminstall--save-dev命令可以将模块安装为开发依赖。也可以使用“npmupdate”和“npmuninstall”进行更新和删除依赖。eslintConfig：用来配置ESLint的规则和选项的。browserslist：浏览器兼容配置。VueCLI的基本使用package-lock.json是一个自动生成的文件，用于确保在不同环境下安装的依赖包版本一致性。它会记录当前项目的依赖关系树以及每个依赖包的确切版本号，即记录了package.json中依赖的来源和版本号。默认package.json中的依赖只能锁定大的版本，所以版本号基本上都加了前缀“^”，如vue的版本号"^3.2.13"。如果团队中其他人拉取了同样的项目，但是vue的版本升级到了"3.2.14"，那就会出现不同开发者使用的具体版本不同，容易出现问题。而package-lock.json就可以锁定版本号防止自动升级依赖模块。README.md是Markdown格式的文件，表示项目的说明文档，通常用来记录项目的架构、功能说明、运行和打包说明、升级信息等，默认里面记录了如何初始化项目、运行项目以及项目打包等。vue.config.js是Vue项目的可选的配置文件。VueCLI是基于webpack实现项目的构建打包的，而vue.config.js就可以来配置一些webpack相关的信息（类似于webpack.config.js配置），vue.config.js的详细配置说明会在后面章节中进行具体的介绍。VueCLI的基本使用4．运行项目在运行vue项目前，一定要确保项目中所有的依赖模块都已安装了。如果项目是通过git拉取或者拷贝项目的方式获取的，需要先执行“npminstall”（或“yarninstall”）安装项目中的所有依赖，然后才能运行vue项目。Vue项目需要借助于package.json中定义的script脚本来运行，如图所示。在新版本的VueCLI创建的项目中，默认的运行脚本是"serve"（在旧版本中是"dev"）。当然，开发者可以根据需要自由更改这些脚本的名称，因为脚本的键名只是表示其对应值的缩写名称而已。VueCLI的基本使用只需在命令终端中执行命令"npmrunserve"，即可启动项目。“vue-cli-serviceserve”脚本执行后将启动一个本地开发服务器，并自动编译和热重载Vue项目。如图所示。温馨提示热重载（HotReload）是指在开发过程中，当开发者对代码进行修改保存后，开发服务器会自动重新加载并应用更新后的代码，无需手动刷新页面。这样开发者可以实时地看到对代码所做的修改在浏览器中的效果。VueCLI的基本使用当项目编译完成之后，就可以根据控制台的给出的任一指定的URL地址（通常是http://localhost:8080）在浏览器中打开项目。如图所示。项目运行的默认端口号是8080。如果想要更改默认端口号，有多种方式可以实现。一种方式是将package.json文件的scripts脚本中的serve命令修改为“vue-cli-serviceserve--port端口号”，其中端口号就是希望更改的端口号。另一种方式是在vue.config.js文件添加devServer配置。VueCLI的基本使用需要注意的是，当你修改了项目中的大部分Vue文件或JavaScript文件时，项目都会自动编译并热重载。然而，对于一些配置文件（如vue.config.js）的修改，则需要手动重启项目才能使其生效。这是因为配置文件的更改涉及到整个项目的构建和配置，需要重新加载项目以应用新的配置。如果是在命令终端中运行的项目，可以按下“Ctrl+C”组合键并在终端提示中输入“Y”停止项目。如果是通过VueUI启动的项目，在项目运行页面上有一个停止按钮，点击它就可以停止项目的运行。模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具SPA和SFC开发1．单页面应用（SPA）多页面应用（MPA）早期前端应用的开发通常采用多页面应用（MultiPageApplication，简称MPA）的方式。多页面应用由多个独立的HTML页面组成，每个页面对应一个完整的应用页面。在多页面应用中，页面之间的跳转是通过发送网络请求来实现的。多页面的应用的主要优点是：扩展性强：理论上多页面应用可以随意增加页面的数量，即使页面呈现的信息量特别大也可以。首页面访问速度快：多页面应用一个请求只返回一个页面，所以请求网站首页面速度也快。有利于SEO优化；多页面应用的页面本身就是由HTML的内容组成，更容易被搜索引擎检索到，所以SEO的性能也好（SEO，SearchEngineOptimization，搜索引擎优化，通过搜索引擎规则经过抓取网页内容、搜索引用、提取搜索关键字等最终达到提高网站自然排名的效果）。SPA和SFC开发多页面的应用同样存在一些缺点：因为每次跳转页面都需要重新加载整个页面，所以无法实现流畅的转场动画效果。每次跳转都需要重新加载和渲染整个页面，因此跳转的速度较慢；可能会导致用户等待页面加载的延迟，并且会增加服务器的负载。页面之间进行数据的传递需要依赖于cookie会话技术或localStorage存储等技术实现。MPA更多的在一些传统的Web开发场景中仍然被广泛使用，特别是在一些对搜索引擎优化（SEO）要求较高的情况下。SPA和SFC开发单页面应用（SPA）单页面应用（SinglePageApplication，简称SPA）是一种现代化的Web应用架构，它由一个主页面和多个片段页面组成。SPA整个应用的逻辑和数据处理都在客户端完成，它在加载初始页面时只加载一次，之后的页面切换只需要加载和渲染变化的片段内容，不再需要重新加载整个页面。SPA的主要优点如下：页面切换快：除了首屏页面外，其他页面切换不需要重新加载整个页面，只需要更新部分页面片段的数据即可。这种方式可以大幅提升页面切换的速度，使用户能够更快地获取所需的内容，从而提供更好的用户体验。SPA不仅减少了页面刷新带来的闪烁和加载时间，而且因为切换速度快，页面的转场动画也更流程。服务器负载小：SPA在初次加载后，只需要通过API请求数据，不需要重复加载页面资源，减轻了服务器的负载压力，提高了系统的整体性能。维护性好：SPA通常使用组件化开发的方式，将页面拆分为多个可复用的组件，代码结构清晰，易于维护和扩展。SPA和SFC开发SPA同样也存在着缺点：首屏加载速度通常较慢，因为需要加载大部分的页面片段和相关资源。然而，SPA后续的页面切换可以通过一些优化手段提升性能，比如路由懒加载、静态资源缓存、代码优化和压缩、图片懒加载、使用CDN加速等手段；不利用SEO的优化，因为SPA中的代码基本上是js渲染出来的，而搜索引擎只会抓取HTML的内容，所以SPA是不利于提取搜索关键字的，这样导致SEO的效能也低。SPA应用的构建通常依赖于优秀的前端框架，例如Vue和React。这些框架提供了丰富的功能和工具，简化了单页面应用的开发过程，可以帮助开发者高效构建复杂的前端应用。在Vue的SPA应用中，Vue不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。SPA和SFC开发最后，通过几个关注点来对比下MPA和SPA的区别，如表所示。关注点SPAMPA结构单个web页面+多个页面片段多个完整的web页面页面跳转使用页面片段之间切换实现模拟的跳转使用网络链接请求实现页面刷新局部刷新，无需重新加载整个页面需要重新加载页面用户体验页面切换速度快，用户体验好页面切换慢，用户体验差首屏加载需要加载大部分页面片段，速度较慢只需要加载单个页面，速度快SEO优化不利用SEO优化，需要借助于服务端渲染SSR等技术实现有利于SEO优化转场动画可以非常简单的实现流程的转场动画可以借助于CSS动画或JavaScript库实现不流畅的转场动画访问路径使用路由访问，如：http://xxx/index.html#page1普通的URL网址，如：http://xxx/page1.html页面数据传递使用路由或Vuex很容易可以实现需要依赖于Cookie会话技术等实现前后端分离难易更容易实现前后端分离实现前后端分离较难是否适合移动端开发方便移动端的开发不利于移动端的开发开发成本成本高，需要借助于Vue等框架成本低，框架选型不限制维护成本低高，修改内容设计页面较多SPA和SFC开发2．单文件组件开发（SFC）单文件组件的使用单文件组件（SingleFileComponent，简称SFC）是一种将一个组件的模板、样式和逻辑封装在一个文件中的开发方式。它的文件格式通常是以.vue为后缀的文件，其中包含了以下几个部分：Template（模板）：定义组件的结构和布局，使用HTML标记和Vue的模板语法来描述组件的界面结构。Style（样式）：包含组件的样式规则，可以使用CSS、SCSS、LESS等样式语言编写样式。Script（脚本）：包含组件的JavaScript代码逻辑，通过Vue的API和语法来定义组件的行为、数据和方法。SFC设计的好处如下：将一个组件的HTML、CSS和JavaScript都写到一个文件内，文件中结构清晰明了；组件编写起来即简单又方便复用。通过文件封装组件，实现关注点的自然内聚。可以更加容易的使用组合式API。SPA和SFC开发可以实现组件作用域的CSS；Vue文件模板会进行预编译，避免运行时的编译开销；更好的IDE开发工具和插件的支持，提供自动补全和对模板中表达式的类型检查等功能；下面以一个简单的示例说明如何使用单文件组件（SFC）,步骤如下：

在components目录下创建“Home.vue”文件。在Home.vue中编写<template>、<script>、<style>三部分结构（可以借助于VSCode代码片段的方式自动生成），如程序清单7-11所示。SPA和SFC开发

在代码中，在Vue2时要求<template>标签中必须有一个根元素，而在Vue3中解除了这个限制。在使用<style>标签时增加了scoped属性，其作用是表示当前的<style>中的样式只作用于当前的Home组件，这样可以避免组件之间CSS样式的污染。另外也可以给<style>添加lang="less"或lang="sass"属性指定不同的样式语法。SPA和SFC开发在App.vue中引入Home组件。上述代码中，在App.vue中通过import的方式引入Home.vue组件，然后在components选项中进行局部注册组件，这样就可以在<template>中使用Home组件了。值得注意的是，项目中默认使用了ESlint代码规范检测工具，而ESlint中要求组件名都必须是多个单词的大驼峰命名，如“HelloWorld”。想要去掉这个限制，可以在package.json中对ESlint进行配置rules规则，如上述右图所示。SPA和SFC开发在命令终端中通过cd切换到项目目录下，然后使用“npmrunserve”命令运行vue项目，就可以看到App.vue中加载Home组件的效果，如图所示。SPA和SFC开发<scriptsetup>的使用<scriptsetup>是Vue3中针对单文件组件（SFC）中使用组合式API的编译时语法糖。它是Vue3.0.0+版本引入的一个特性，旨在简化和优化组合式API的使用方式。通过使用<scriptsetup>，可以将模板、状态、计算属性和方法等组合式API的代码整合在一个地方，使得代码更加简洁、可读性更高，并且提供更好的性能和错误检查。使用<scriptsetup>时，可以省略掉以前在组件选项中的繁琐设置，如setup函数、props、data、computed等，而是通过变量声明来直接定义组件的状态和逻辑。<scriptsetup>可以和正常的<script>同时存在，在<scriptsetup>中定义的变量，不管是普通的变量，还是响应式的变量，亦或者是导入组件，甚至是自定义指令，都可以直接使用到模板中。首先，下面我们在components目录下创建一个“SetUp.vue”文件。SPA和SFC开发

从代码中可以看出，使用<scriptsetup>的方式要比我们之前定义setup函数简洁了很多，不仅省略了很多的设置和返回，代码的可读性也很高。值得注意的是，在<scriptsetup>中引入的组件无须手动注册就可以直接使用到模板中。SPA和SFC开发最后，我们将SetUp.vue引入到App.vue中，然后运行代码，可以看到效果跟使用setup函数一样，如图所示。模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具插件和配置1．插件VueCLI是一个基于插件的架构，它可以为@vue/cli项目添加额外特性的npm包。在package.json的devDependencies中可以看到以“@vue/cli-plugin-”开头的依赖模块，如babel、eslint，这些就是CLI插件。CLI插件可以修改webpack的内部配置，也可以向vue-cli-service注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。每个CLI插件都会包含一个用来创建文件的生成器和一个用来调整webpack核心配置和注入命令的运行时插件。当使用vuecreate来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果项目已经创建但未安装所需的插件，可以使用“vueadd”命令来安装插件。如下：上述的命令其实等价于：不管是eslint还是cli-plugin-eslin命令都会被解析为@vue/cli-plugin-eslint，然后通过npm安装它。当然vueadd命令只是用来安装和调用CLI插件的，如果需要安装的是普通的依赖模块，还是要使用npm来安装。

vueaddeslint

vueaddcli-plugin-eslint或vueadd@vue/cli-plugin-eslint插件和配置如果是VueUI运行的项目，可以在插件页面添加和更新插件，如图7-17所示。插件和配置2．项目配置vue.config.js是一个可选的配置文件，用于对项目进行相关配置。当项目中的根目录下存在vue.config.js时，它就会被@vue/cli-service自动加载。在vue.config.js中可以根据项目需求进行自定义配置，以满足特定的开发和构建需求，比如修改webpack配置、配置代理、设置打包路径等。vue.config.js会导出一个包含了配置选项的JSON对象，比如devServer选项；vue.config.js遵循Node.js的模块化规范，因此在vue.config.js中将使用require引入模块，使用module.exports导出对象。vue.config.js中常用的几个配置项，如表所示。插件和配置选项说明publicPath和webpack的output.publicPath使用一致，表示部署应用包时的基本URL。默认值为“/”，表示应用是被部署在一个域名的根路径上，如果是部署在指定子路径如/hello，那么访问的时候使用域名+子路径的方式访问，如：线上部署访问为/hello或本部署访问为http://localhost/hello。outputDir当使用“vue-cli-servicebuild”脚本（等同于“npmrunbuild”）进行应用打包的时候，用来指定部署应用包生成的路径。assetsDir指定打包时生成js、css、img、fonts等静态资源的目录(相对于outputDir路径)。indexPath指定生成的应用index.html的输出路径(相对于outputDir路径)。pages用来构建多页面应用使用，每个“page”应该有一个对应的JavaScript入口文件lintOnSave是否在开发环境下通过eslint-loader在每次保存时lint代码。默认值为default，表示会将lint错误输出为编译错误，并显示在浏览器上。如果不想编译失败但是需要把编译编程警告，可以设置为“true”或“warning”transpileDependencies默认情况下babel-loader会忽略所有node_modules中的文件。启用本选项可以避免构建后的代码中出现未转译的第三方依赖。configureWebpack以webpack配置的方式进行配置。如果值是对象将会被webpack-merge合并入最终的webpack配置；如果这个值是一个函数，则会接收被解析的配置作为参数。chainWebpack允许使用链式操作对内部的webpack配置进行更细粒度的修改devServer开发服务器配置，支持所有webpack中的devServer的配置选项，如：host、port、https、allowedHosts等；devSxy如果前端应用和后端API服务器没有运行在同一个主机上，需要指定devSxy在开发环境下将API请求代理到API服务器。pluginOptions用来传递任何第三方插件选项插件和配置通过上面的配置项来看一个vue.config.js的配置内容。

当执行"npmrunbuild"命令进行应用的编译、构建和打包时，VueCLI会根据在vue.config.js中的配置选项进行相应的构建操作。构建完成后，将在项目的根目录下生成了一个名为"dist"的文件夹。该"dist"文件夹即为应用的部署包，其中包含了经过编译和打包后的静态资源文件。模块化开发12环境准备3VueCLI的基本使用4SPA和SFC开发5插件和配置6Vite-新型前端构建工具Vi