面试

一、变量的声明 声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中，body选择器里面声明了两个变量：--foo和--bar。 它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**“CSS 自定义属性”**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。 你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。 各种值都可以放入 CSS 变量。 :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); } 变量名大小写敏感，--header-color和--Header-Color是两个不同变量。 二、var() 函数 var()函数用于读取变量。 a { color: var(--foo); text-decoration-color: var(--bar); } var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 color: var(--foo, #7F583F); 第二个参数不处理内部的逗号或空格，都视作参数的一部分。 ...

本知识点将以 Pinia 为例，介绍 Vue 中的状态管理。 前言 Pinia简称小菠萝🍍，是一个专为Vue 3设计的现代化状态管理库，为Vue 3开发的，它提供了一种简单、可扩展和类型安全的方式来管理应用程序的状态。 与Vue 2中的Vuex相比，Pinia提供了更好的TypeScript支持，具有更好的类型定义和类型推断，可在编译时捕获错误，提供更高的代码可靠性和开发体验。它是专为Vue 3设计的，充分利用了Vue 3的新特性，如Composition API，以提供更直接、自然和灵活的状态管理体验。Pinia的核心概念是Store，它类似于Vuex中的模块，用于管理应用程序的状，可以将相关的状态和逻辑组合到单个Store中，使代码更清晰、结构更有组织性。除此之外海提供了许多有用的特性和功能，例如模块化组织、状态持久化、插件扩展等。 总的来说，Pinia是一个功能强大而灵活的状态管理解决方案，适用于各种规模的Vue 3应用程序。它提供了现代化的特性和工具，帮助我们更好地组织、管理和扩展应用程序的状态，同时提供了更好的类型安全和开发体验。 安装 运行安装命令 npm install pinia 在main.ts中引入 // main.ts import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App) app.use(pinia) app.mount('#app') 初始化Store 新建stores文件，用于存放所有的store，然后创建index.ts。 同过 defineStore() 定义一个store，它接受一个参数作为仓库名称，也就是Id。它返回一个函数，默认我们使用user开头的风格来接收。第二个参数为一个Setup函数或者Option对象。 import { defineStore } from 'pinia' export const useUsersStore = defineStore('users', { // 其他配置... }) Option Store 这种方式熟悉Vuex的很了解，传入一个带有 state、actions 与 getters 属性的 Option 对象 export const userUsersStore = defineStore('users', { state: () => { return { name: 'inkun', current: 100 } }, getters: { getName: (state) => state.name + '🐔你好帅' }, actions:{ getUserInfo { ... } } }) 在 Option Store 中： ...

apply 和 call简介 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 比如 A 对象有一个方法，而 B 对象因为某种原因，也需要用到同样的方法，那么这时候不用单独为 B 对象扩展一个方法，可以直接借用 A 对象的方法。这样既完成了需求，又减少了内存的占用。 直接来看个例子： function fruits() {} fruits.prototype = { color: "red", say: function() { console.log("My color is " + this.color); }} var apple = new fruits();apple.say(); //My color is red 但是如果我们有一个对象 banana= {color : "yellow"} ,我们不想对它重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法： banana = { color: "yellow"}apple.say.call(banana); //My color is yellowapple.say.apply(banana); //My color is yellow apply、call 的区别 对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。例如，有一个函数定义如下： ...

+load和+initialize是Objective-C中两个特殊的类方法，它们都会被Runtime自动调用，但调用时机、调用方式和使用场景有很大区别。理解它们的差异对于iOS开发和性能优化非常重要。 基本定义 +load方法 +load方法在类被加载到内存时由Runtime自动调用，发生在main函数执行之前。 @implementation MyClass + (void)load { NSLog(@"MyClass loaded"); } @end +initialize方法 +initialize方法在类第一次收到消息时由Runtime自动调用，是一种懒加载机制。 @implementation MyClass + (void)initialize { NSLog(@"MyClass initialized"); } @end 核心区别对比 特性 +load +initialize 调用时机 main函数之前，类加载时 类首次收到消息时 调用方式 直接调用函数指针 通过objc_msgSend 调用次数 每个类只调用一次 可能被调用多次 是否阻塞启动 是 否 是否需要显式调用父类 否，自动调用 否，自动调用 Category的行为 都会被调用 会覆盖主类实现 线程安全 是 是 调用顺序 父类 -> 子类 -> Category 父类 -> 子类 未实现时的行为 不调用 可能调用父类实现 调用时机详解 +load的调用时机 +load的调用发生在dyld加载镜像的过程中： dyld加载Mach-O ↓ 映射到内存 ↓ 读取__DATA段中的__objc_nlclslist（非懒加载类列表） ↓ 调用所有类的+load方法 ↓ 读取__objc_nlcatlist（非懒加载分类列表） ↓ 调用所有分类的+load方法 ↓ main()函数执行 +initialize的调用时机 +initialize在类第一次收到消息时调用： ...

抓包的原理 什么是抓包？ 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以： 分析网络问题 业务分析 分析网络信息流通量 网络大数据金融风险控制 探测企图入侵网络的攻击 探测由内部和外部的用户滥用网络资源 探测网络入侵后的影响 监测链接互联网宽频流量 监测网络使用流量（包括内部用户，外部用户和系统） 监测互联网和用户电脑的安全状态 渗透与欺骗 … 回顾下计算机网络知识，数据在网络上是以很小的帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（Sniffers）进行抓包，作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。 HTTP/HTTPS 抓包原理 HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。 对运行在不同端系统上的客户端程序和服务端程序是如何互相通信的么？实际上，在操作系统上的术语中，进行通信的实际上是进程而不是程序，一个进程可以被认为是运行在端系统中的一个程序。 在 web 应用程序中，一个客户浏览器进程与一台服务器进程进行会话交换报文。 浏览器进程需要知道接收进程的主机地址，以及定义在目的主机中的接收进程的标识符，也就是目的端口。 多数应用程序由通信进程对组成，每对中的两个进程互相发送报文。进程通过一个称为套接字的软件接口向网络发送报文和从网络接收报文。 进程可以类比一座房子，而它的套接字可以是它的门，套接字是应用层与运输层之间的端口。 知道了两个进程的通信流程，我们要怎么抓包呢？举一个生活中的例子，小明暗恋小雯，于是他写了一封情书，但他有点害羞，找了小雯的好朋友小花帮忙传递情书。这个时候，小花可以负责小雯与小明之间的情书传递，作为中间人，她可以偷偷查看他们的情书内容。 思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发。 HTTP 抓包原理 在 http 标准中，没有对通信端身份验证的标准。对于服务器来说，它接收的 HTTP 请求报文只要格式符合规范，就发送响应报文。 对于客户端来说也是如此，它无法校验服务器的身份，比如它连接的 http://www.jecyu.com 的主机，但由于中间节点的存在，最终连接的可能是 http://www.jerry.com 的主机。 因此，对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。 HTTPS 抓包原理 HTTP 是明文传输，容易受到中间人攻击，不安全。 HTTPS 语义仍然是 HTTP，只不过是在 HTTP 协议栈中 http 与 tcp 之间插入安全层 SSL/TSL。 安全层采用对称加密的方式加密传输数据和非对称加密的方式来传输对称密钥，解决 http 数据没有加密、无法验证身份、数据容易纂改三个核心问题。 HTTP + 加密 + 认证 + 完整性保护 = HTTPS ...

React的函数组件（Function Components）自Hooks推出以来已成为React开发的主流方式。理解函数组件的更新原理对于编写高效、可维护的React应用至关重要。本文将深入探讨React函数组件的更新机制。 一、函数组件与类组件的本质区别 在深入更新原理前，我们需要明确函数组件与类组件的根本区别： 类组件：是类的实例，拥有实例属性和生命周期方法 函数组件：是纯函数，接收props作为参数，返回JSX 这种本质区别决定了它们的更新行为完全不同。 二、函数组件的执行机制 当React需要渲染一个函数组件时，它只是简单地调用这个函数： function MyComponent(props) { return <div>{props.message}</div>; } // React内部大致这样处理 const element = MyComponent({ message: 'Hello' }); 每次渲染都是全新的函数调用，所有局部变量和函数都会重新创建。这与类组件形成鲜明对比，类组件在更新时会复用同一个实例。 三、触发更新的场景 函数组件的更新主要由以下情况触发： 父组件重新渲染：即使props未变化，父组件渲染也会导致子组件重新渲染 props发生变化：当传入组件的props值改变时 状态更新：通过useState、useReducer等Hook更新状态 context变化：组件订阅的context值发生变化 Hooks依赖变化：useEffect、useMemo等Hook的依赖项发生变化 四、React的渲染流程 函数组件的更新遵循React的渲染流程： 触发更新：通过setState、父组件渲染等途径触发更新 协调阶段（Reconciliation）： React调用函数组件获取新的JSX 与上一次渲染的JSX进行对比（Virtual DOM Diff） 提交阶段（Commit）： 将差异应用到真实DOM 执行useLayoutEffect的回调 浏览器绘制：浏览器重绘屏幕 副作用执行：执行useEffect的回调 五、Hooks与组件更新 Hooks是函数组件能够拥有状态和生命周期的关键。理解Hooks的工作机制对理解组件更新至关重要。 useState的工作原理 const [count, setCount] = useState(0); React会在组件首次渲染时为每个useState调用分配一个"状态单元" 后续更新时，React会按照Hooks的调用顺序来提供对应的状态值 setCount调用会触发组件的重新渲染 useEffect与更新 useEffect(() => { // 副作用代码 return () => { // 清理函数 }; }, [dependencies]); 组件每次渲染后，React会比较依赖项数组 如果依赖项变化或没有提供依赖项数组，副作用会重新执行 清理函数会在副作用重新执行前或组件卸载时执行 六、优化更新性能 由于函数组件每次更新都会完整执行函数体，我们需要一些优化手段： ...

浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。 前言 说到深浅拷贝，必须先提到的是JavaScript的数据类型，大家可以看前面的知识点，这里不多说了。 初学前端的同学，需要知道的一点就是：JavaScript的数据类型分为基本数据类型和引用数据类型。 对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。 浅拷贝 浅拷贝的意思就是只复制引用，而未复制真正的值。 const originArray = [1,2,3,4,5]; const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}}; const cloneArray = originArray; const cloneObj = originObj; console.log(cloneArray); // [1,2,3,4,5] console.log(originObj); // {a:'a',b:'b',c:Array[3],d:{dd:'dd'}} cloneArray.push(6); cloneObj.a = {aa:'aa'}; console.log(cloneArray); // [1,2,3,4,5,6] console.log(originArray); // [1,2,3,4,5,6] console.log(cloneObj); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}} console.log(originArray); // {a:{aa:'aa'},b:'b',c:Array[3],d:{dd:'dd'}} 上面的代码是最简单的利用 = 赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着 cloneArray 和 cloneObj 改变，originArray 和 originObj 也随着发生了变化。 深拷贝 深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。 只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。 目前实现深拷贝的方法不多，主要是两种： 利用 JSON 对象中的 parse 和 stringify 利用递归来实现每一层都重新创建对象并赋值 JSON.stringify/parse的方法 先看看这两个方法吧： The JSON.stringify() method converts a JavaScript value to a JSON string. JSON.stringify 是将一个 JavaScript 值转成一个 JSON 字符串。 ...

HTML、CSS 和 JavaScript 是前端开发的三大基础技术，它们通过不同的方式相互作用，创建交互性良好的网页。 1. HTML 与 CSS 的交互 HTML 负责定义网页的结构，而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式： <style> 标签：直接在 HTML 中嵌入 CSS 样式。 这种方式将 CSS 写入到 HTML 文件中，但不推荐用于大型项目，因为这会导致样式与结构混杂在一起。 <style> h1 { color: red; } </style> <link> 标签：通过 <link> 标签引入外部 CSS 文件。 这种方式通常用于大型项目中，将样式与结构分离，维护更加清晰。 <link rel="stylesheet" href="styles.css"> 内联样式：直接将样式属性写在 HTML 标签内。 这种方式适合临时的小改动，但不推荐频繁使用，尤其在大型项目中不利于维护。 <h1 style="color: blue;">这是一个标题</h1> 2. HTML 与 JavaScript 的交互 JavaScript 负责操作和控制网页内容，主要与 HTML 进行交互以实现动态效果。以下是交互方式： <script> 标签：通过 <script> 标签直接在 HTML 中嵌入 JavaScript 代码。 此方法会在 HTML 中直接执行 JavaScript，适合小规模的脚本。 <script> alert('这是一个弹窗'); </script> 外部 JavaScript 文件：通过 <script> 标签引入外部 JavaScript 文件。 这种方式将 JavaScript 逻辑与 HTML 分离，便于维护和重用。 <script src="script.js"></script> DOM 操作：通过 JavaScript 操作 DOM（文档对象模型），动态更改 HTML 元素的内容和属性。例如： <p id="text">这是原始文本</p> <script> document.getElementById('text').innerText = '这是通过 JS 改变的文本'; </script> 事件监听：JavaScript 可以通过事件监听器响应用户的交互。例如： <button id="btn">点击我</button> <script> document.getElementById('btn').addEventListener('click', function() { alert('按钮被点击了'); }); </script> 3. CSS 与 JavaScript 的交互 JavaScript 也可以与 CSS 进行交互，动态地控制页面的样式。常见的方法有： ...

一、display属性介绍 display 属性规定元素应该生成的框的类型。 以下是一些关于display比较常用的属性值： 值 描述 none 元素不会显示 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 line-block 行内块元素。（CSS2.1 新增的值）[IE6/7不支持] list-item 此元素会作为列表显示。 inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 table-row 此元素会作为一个表格行显示（类似 tr）。 table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）. inherit 规定应该从父元素继承 display 属性的值。 其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。 二、display:none 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。 三、display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度； block元素可以设置margin和padding属性； block元素可以设置width、height属性。 块级元素即使设置了宽度，仍然是独占一行。块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行。 块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，如下图所示： 块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行，如下图所示： 四、display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化； inline元素设置width、height属性无效； inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。 如下图所示： 五、display:inline-block 将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。就是集合了block和inline的全部优点。width、height、margin、padding设置都会生效。 如下图所示： 原文：https://juejin.cn/post/6844903781566513160 常见考点 1. 基本概念 请简述 CSS 中的 display 属性及其作用。 display 属性的常见值有哪些？请列举并解释其含义。 例如：block、inline、inline-block、flex、grid、none 等。 2. display: block 什么是 display: block？它会给元素带来哪些表现？ 一个块级元素通常具有哪些特点？例如：它的宽度会如何变化？它是否会换行？ 3. display: inline 什么是 display: inline？它与 display: block 有什么不同？ 内联元素如何处理宽度和高度？它们是否会占据整个可用宽度？ 如何让一个内联元素变得像块级元素一样换行？ 4. display: inline-block 什么是 display: inline-block？它结合了 inline 和 block 的哪些特点？ 使用 inline-block 时，元素的宽高如何影响布局？ inline-block 元素如何与其他元素对齐？ 5. display: none 请解释 display: none 的作用与 visibility: hidden 的区别。 使用 display: none 会有什么样的表现？例如，它对页面布局有何影响？ 当你将一个元素的 display 设置为 none 时，它会消失，但仍然存在于 DOM 中。如何通过 JavaScript 使其重新显示？ 6. display: flex display: flex 是什么？它通常用来实现什么样的布局效果？ 在使用 flex 布局时，如何控制子元素的排列方向、对齐方式等？ justify-content、align-items、flex-direction 等 Flexbox 属性的作用是什么？ 7. display: grid 什么是 display: grid 布局？它与 flex 布局有何区别？ 在 grid 布局中，如何设置行和列的大小？如何控制子元素的位置？ 请举例说明 grid-template-columns、grid-template-rows、grid-gap 等属性的使用方法。 8. display: table 什么是 display: table，它如何模仿传统的 HTML <table> 元素？ 使用 display: table 时，如何控制表格的行和列布局？ display: table-row、display: table-cell 和 display: table-caption 的作用是什么？ 9. 布局模型对比：block vs inline vs flex vs grid 你如何选择使用 block、inline、flex 或 grid 布局？ 在实际项目中，什么时候使用 flex 布局，什么时候使用 grid 布局？ 请比较 flex 和 grid 布局的优缺点及应用场景。 10. display 与其他布局属性 在使用 display: flex 或 display: grid 布局时，如何与其他布局属性（如 position、float 等）配合使用？ 如何解决使用 display: flex 或 display: grid 布局时遇到的常见布局问题，例如元素溢出、对齐等？ 11. display: none 与性能 display: none 对页面性能有何影响？如何通过 JavaScript 动态控制显示/隐藏元素以提高性能？ 12. display: contents 什么是 display: contents？它是如何工作的？它与其他 display 值有什么区别？ 请举例说明 display: contents 的应用场景及可能的问题。 13. display 的继承性 display 属性是否继承？如果没有，如何通过样式继承的方式控制多个元素的 display 属性？ 你如何在多个嵌套元素中保持一致的布局设置？ 14. display 的可见性与布局 display 属性会影响元素的布局、渲染和可见性。请简要解释 display: none 和 visibility: hidden 的区别，它们对页面的影响不同吗？ 15. 实际应用 请描述一个你在实际开发中使用 display 属性解决布局问题的案例。 如果需要在一个响应式设计中调整元素的布局，如何根据屏幕尺寸调整 display 属性？

前言 什么是SSR(Server-Side Rendering)？类似于用Java、ASP.NET、php开发前端页面，服务端准备数据并执行页面渲染，然后把完整的HTML发送给客户端。现代化的SSR通常和Vue、React等前端框架强关联，通过Node.js在服务端提前将page、component使用同构方式渲染为html代码，其目的是在实现SSR时尽量复用一套渲染机制。例如Vue框架就同时支持了CSR(Client-Side Rendering)和SSR。 SSR能解决什么问题？ SEO: Google、百度、Yandex、Bing或者Yahoo等搜索引擎会通过网络爬取你的页面并建立索引，如果的信息越完整，那么你的网站就更容易被检索到。使用SSR技术，让页面在服务端提前渲染好再返回给客户端，这样各类搜索引擎就能拿到比较完整的页面信息，提升检索质量。 首屏渲染：SPA(Single Page Application)将页面渲染放到客户端执行，并且在渲染之前要加载大量的Javascript代码，所以首屏渲染需要花费较长时间。而SSR直接在服务端渲染完再返回客户端，使用户能够快速看到页面内容。 有哪些框架支持SSR？ 开源库 支持语言 star数 描述 Nuxt Vue 54.9k 快速构架、类型安全、高性能、易扩展 Next React 127k 老牌框架、社区完善、Data Fetch、Styling quasar Vue 26k 丰富的UI、支持桌面端和移动端 Remix React 29.9k 极致的用户体验、开箱即用 本知识点将以 Nuxt 为例，介绍如何实现 SSR。 什么是Nuxt 基于Vue、React、Angular实现的full-stack框架数不胜数，但就Vue框架领域内，应该数Nuxt最为Top 1。Nuxt保持了Vue生态的“开箱即用”特性，类似于Vite，几条指令就可直接run起来。如果你熟悉Vue，那么基于Nuxt写应用，体验上和写Vue客户端应用极其相似。 Nuxt提前预制了一套目录结构，并自动处理路由、导入、数据获取，开发人员仅需按约定的规则实现页面、组件、数据API即可，极大降低开发人员学习成本。Nuxt的特性可总结为： 基于文件的路由: 页面统一添加到pages/目录下，例如添加index.vue、about.vue、contact.vue，就可以通过/访问首页，通过/about返回关于页面； 代码分割：得益于Vue的Virtual Node，Nuxt根据目录规则提前生成完整的依赖树，这样能够将所有code拆分为最小单元的chunks, 从而减少应用初始化加载时间； 开箱即用的SSR：Nuxt内部使用Vue的SSR，除了Vue实现SSR、CSR本身的差异，可以像开发CSR的Vue应用一样来开发SSR，降低研发心智负担； 自动导入：在实现页面或组件时，不需要像CSR手动导入(import Card from './Card.Vue')依赖，当Nuxt识别到有使用外部组件，bundle过程会自动识别； 数据获取工具：提供一套组合式FetchAPI，实现client、server端的同构； 配置好的构建工具：默认使用Vite构建，同时支持Webpack、Rspack； Nuxt的架构设计和vue/core很相似，将整体功能拆分为独立的package: 核心引擎：nuxt； bundlers: 打包器包含@nuxt/vite-builde、nuxt/webpack-builder、@nuxt/rspack-builder； 命令行工具：nuxi； 服务端引擎：nitro； 开发套件：@nuxt/kit； 上手体验 初始化项目 使用nuxi提供的指令初始化项目： npx nuxi@latest init nuxt-learn-examples 如果安装过程下载失败，可能需要配置hosts: 185.199.108.133 raw.githubusercontent.com 最新nuxt版本3.14初始化的项目目录比较简单，少了pages、plugins等目录，入口为app.vue： ...