Vue学习进阶之路：从入门到实战的心得与感悟​

作为一名从“前端小白”逐步进阶的开发者，近半年来我深耕Vue技术栈，从Vue3的基础语法到企业级项目的开发部署，从单一页面应用到简单全栈项目的实现，每一步探索都充满挑战却也收获满满。在这个过程中，我不仅突破了“会用”的初级阶段，更对Vue框架的设计思想、生态体系以及前端工程化有了系统性的认知。今天，我将结合近20个实战案例的开发经历，从学习方法论、核心技能拆解、生态技术拓展、项目实战复盘以及职业成长思考五个维度，展开撰写这份万字学习心得，希望能为正在Vue学习路上前行的伙伴们提供一份详实、可落地的参考指南。

一、系统化学习：告别碎片化，构建Vue知识体系

前端技术的学习最易陷入“碎片化陷阱”——今天看一个组件封装教程，明天学一个路由配置技巧，看似学了很多，却始终无法串联成完整的知识体系，遇到复杂项目时依旧无从下手。我在Vue学习初期就曾深受其害，花费了大量时间刷短视频教程，结果却连一个完整的TodoList都写得不规范。后来，我彻底调整学习策略，采用“系统化输入+阶段性输出”的模式，才真正实现了从“零散知识点”到“体系化能力”的跨越。

1. 基础阶段：精读文档+动手复现，吃透底层逻辑

Vue官方文档是学习Vue的“圣经”，尤其是Vue3的官方文档，不仅内容全面，还提供了交互式示例和详细的API说明。但很多初学者对文档存在误解，认为“文档太枯燥，不如视频教程直观”，实则不然。视频教程往往会省略很多底层逻辑和边界情况，而文档却能帮我们建立最权威、最完整的知识框架。我在基础学习阶段，制定了“两周精读计划”，每天花3-4小时逐字阅读Vue3官方文档，重点关注“核心概念”“API参考”和“迁移指南”三个模块，并且做到“每一个示例都动手复现，每一个API都亲自测试”。

以“响应式数据”这一核心概念为例，我没有停留在“ref和reactive可以实现数据响应式”的表面认知，而是通过三步深入拆解：第一步，复现文档中的基础示例，用ref定义基本类型数据，用reactive定义对象类型数据，观察数据变化时视图的更新效果；第二步，测试边界情况，比如给reactive定义的对象添加新属性是否能触发响应式、ref包裹的对象如何访问原始数据（通过.value属性）、解构reactive对象后数据是否还具有响应式等；第三步，探究底层原理，通过查阅Vue源码解析文章和官方文档的“深入响应式系统”章节，理解Proxy代理机制的工作流程——当我们用reactive创建响应式对象时，Vue会通过Proxy对对象进行包裹，拦截对象的get和set操作，在get时收集依赖，在set时触发依赖更新，从而实现“数据驱动视图”。为了巩固这一知识点，我还手动实现了一个简易版的响应式系统，虽然功能简陋，但让我对Proxy的使用和依赖收集的逻辑有了更深刻的理解。

对于Vue的基础指令，我专门建立了一个“指令实战手册”，针对每个指令的用法、适用场景、注意事项进行详细记录，并搭配多个实战案例。以v-for指令为例，我整理了以下核心知识点并逐一验证：

• 基本用法：循环数组、循环对象（可获取key、value、index）、循环整数（生成指定次数的列表）；

• key属性的作用：通过对比不同数据的key值，让Vue更高效地更新DOM，避免重复渲染。我专门做了对比实验，在没有key和有key（使用唯一id作为key）的情况下，分别对列表进行添加、删除、排序操作，通过浏览器开发者工具观察DOM的更新情况，清晰地看到了key属性对渲染性能的优化效果；

• 常见问题：使用index作为key可能导致的问题（当列表进行排序、删除等操作时，index会发生变化，导致Vue误判DOM元素，出现数据错乱）、v-for与v-if同时使用的优先级问题（v-for优先级高于v-if，会导致不必要的循环渲染，建议在父元素中使用v-if控制，或使用computed过滤数据后再循环）。

此外，对于Vue的生命周期、computed与watch的区别、methods的使用场景等易混淆知识点，我采用“对比分析+案例验证”的方式进行梳理。比如为了区分computed和watch，我设计了一个“购物车总价计算”的案例：用computed根据商品列表的数量和单价自动计算总价（依赖多个数据，需要缓存结果）；用watch监听商品数量的变化，当数量超过10件时给出“库存不足”的提示（监听单个数据，执行异步操作）。通过实际代码的编写和运行，我清晰地掌握了两者的适用场景，避免了在项目中滥用的情况。

2. 进阶阶段：项目驱动+问题拆解，强化实战能力

基础知识点掌握后，必须通过实战项目进行巩固和深化，否则很容易出现“看得懂、写不出”的困境。我在进阶阶段采用“阶梯式项目实战”策略，从“单一功能小案例”到“多模块完整项目”，再到“企业级项目优化”，逐步提升自己的实战能力。每个项目完成后，我都会进行全面的复盘，总结遇到的问题、解决方案和可复用的经验，形成自己的“实战手册”。

第一阶段：单一功能小案例（5个）。这一阶段的目标是巩固基础知识点，培养“用Vue解决具体问题”的思维。我选择了5个经典的小案例：TodoList（待办事项管理，涵盖数据绑定、事件处理、列表渲染）、计数器进阶版（包含增减、重置、步进设置、数值范围限制等功能，练习computed和watch的使用）、表单验证系统（涵盖输入框、下拉框、单选框、复选框等多种表单元素，使用VeeValidate插件实现实时验证和错误提示）、图片轮播组件（练习组件封装、props传值、自定义事件）、 tabs切换组件（练习动态组件、路由基础）。每个案例我都会至少编写两个版本，一个版本使用Options API，一个版本使用Composition API，通过对比两种API的写法，深刻理解Composition API的优势——更好的代码组织、更灵活的逻辑复用、更清晰的类型推导。

以图片轮播组件的开发为例，我完整的开发流程如下：

1. 需求分析：实现图片自动切换、手动点击切换、左右箭头切换、指示器切换、鼠标悬停暂停自动切换等功能；

2. 组件设计：将轮播组件拆分为Carousel（父组件，负责整体逻辑）和CarouselItem（子组件，负责单个图片的渲染），通过props向子组件传递图片地址和描述信息，通过自定义事件实现子组件与父组件的通信；

3. 核心逻辑实现：

   1. 自动切换：使用setInterval实现定时切换，记录当前索引，每次切换时索引加1，超出图片数量则重置为0；

   2. 手动切换：为指示器和左右箭头绑定点击事件，修改当前索引；

   3. 暂停与继续：在鼠标悬停时清除定时器，鼠标离开时重新创建定时器；

   4. 边界处理：当图片数量为1时，隐藏箭头和指示器，不执行自动切换。

4. 优化改进：添加过渡动画（使用Vue的transition组件实现图片切换时的淡入淡出效果）、处理图片加载失败的情况（为img标签添加error事件，显示默认占位图）、支持自定义自动切换时间（通过props传递interval属性）。

在开发过程中，我遇到了“定时器泄漏”的问题——当组件销毁时，定时器没有被清除，导致页面中仍然存在定时器任务，影响性能。通过查阅文档和调试，我找到了解决方案：在组件的onUnmounted生命周期钩子中清除定时器。这个问题让我深刻认识到，在Vue开发中，必须关注组件的生命周期，及时清理资源，避免内存泄漏。

第二阶段：多模块完整项目（2个）。这一阶段的目标是掌握Vue生态的核心技术（Vue Router、Pinia、Axios），理解前端工程化的基本流程。我选择了两个具有代表性的项目：“基于Vue3+Vue Router+Pinia的个人博客系统”和“基于Vue3+Element Plus的后台管理系统”。这两个项目涵盖了路由管理、状态管理、数据请求、组件通信、权限控制、UI组件库使用等企业级开发的核心需求。

以个人博客系统的开发为例，项目的核心模块和技术实现如下：

（1）项目初始化与工程化配置

使用Vite初始化项目，相比Vue CLI，Vite的冷启动速度更快、热更新更及时，能大幅提升开发效率。项目结构规划如下：

使用Vite初始化项目，相比Vue CLI，Vite的冷启动速度更快、热更新更及时，能大幅提升开发效率。我按功能模块规划了清晰的项目结构，涵盖静态资源、公共组件、路由配置、状态管理、页面组件、接口请求、自定义Hook、工具函数、自定义指令等核心目录，确保代码组织规范，提升可维护性。

工程化配置重点：

• Vite配置：在vite.config.js中配置别名（将@指向src目录，简化文件引入路径）、跨域代理（解决开发环境下的跨域问题）、CSS预处理器（使用Sass/Scss）、构建优化（压缩代码、拆分Chunk）；

• 代码规范：集成ESLint和Prettier，配置.eslintrc.js和.prettierrc文件，制定代码规范（如缩进为2个空格、语句末尾不加分号、单引号代替双引号等），并在package.json中添加lint脚本，实现代码自动检查和修复；

• 类型推导：使用TypeScript约束数据类型，为Props、Pinia状态、接口返回数据等添加类型定义，减少类型错误，提升代码的可维护性。

（2）路由管理（Vue Router）

路由配置是单页应用的核心，我在项目中实现了以下功能：

• 基础路由配置：定义首页、文章列表、文章详情等页面的路由规则，使用动态路由传递参数（如文章详情页的路由为“/article/:id”，通过id获取对应的文章信息）；

• 嵌套路由：在后台管理页面中使用嵌套路由，将页面划分为侧边栏（Sidebar）和主内容区（MainContent），侧边栏点击不同菜单时，主内容区渲染对应的子页面（如文章列表、文章编辑、分类管理等）；

• 路由懒加载：通过import()函数实现路由懒加载，将不同页面的组件拆分为独立的Chunk，只有当用户访问对应的路由时才加载对应的组件，减少初始加载资源体积，提升页面加载速度；

• 路由守卫：使用全局前置守卫（router.beforeEach）实现登录权限控制——当用户访问需要登录的页面（如后台管理页面）时，判断用户是否已登录（通过Pinia中的userStore获取登录状态），如果未登录，则跳转到登录页面，并记录当前跳转地址，登录成功后返回该地址；使用组件内守卫（beforeRouteEnter、beforeRouteLeave）实现页面级别的权限控制和数据验证，比如在编辑文章页面，当用户未保存内容就离开时，给出提示信息，防止数据丢失。

路由配置核心实现思路：通过路由懒加载减少初始加载资源体积，利用嵌套路由实现后台管理页面的布局拆分，借助全局前置守卫实现登录权限控制，通过组件内守卫处理页面级别的数据验证与跳转拦截，确保路由管理安全且高效。

在路由配置中，我会明确区分公开页面与需登录页面，通过meta字段标记权限要求；对于文章详情等需要传递参数的页面，使用动态路由并开启props传递，让组件获取参数更直观。全局前置守卫会校验用户登录状态，未登录访问受保护页面时，自动跳转到登录页并记录跳转地址，方便登录后返回原页面。

（3）状态管理（Pinia）

Pinia是Vue官方推荐的状态管理库，相比Vuex，它的API更简洁、更符合Vue3的Composition API风格，并且支持TypeScript，无需手动编写类型声明。我在项目中按功能模块划分了三个Store：userStore（用户相关状态，如登录状态、用户信息）、articleStore（文章相关状态，如文章列表、文章详情、分类列表）、appStore（应用全局状态，如主题颜色、加载状态、通知消息）。

以userStore为例，核心实现思路：按功能模块划分Store，明确存储登录状态、用户信息、加载状态等核心数据；在actions中封装登录、获取用户信息、退出登录等异步操作，添加加载状态控制提升用户体验；通过状态持久化插件将关键状态存储到本地，避免页面刷新后状态丢失，同时注意敏感信息的安全存储。

在设计userStore时，我定义了清晰的用户信息类型，确保数据类型规范；登录操作中，先存储后端返回的token，再同步获取用户信息，最终更新登录状态；获取用户信息失败时，自动清除登录状态和token，保证状态一致性；退出登录时则全面清理相关状态和存储的token。

在使用Pinia的过程中，我重点关注了以下几个问题：

• 状态持久化：由于Pinia中的状态存储在内存中，页面刷新后状态会丢失，因此需要实现状态持久化。我使用了pinia-plugin-persistedstate插件，通过简单的配置即可将状态持久化到localStorage或sessionStorage中。需要注意的是，对于敏感信息（如token），不建议直接存储在localStorage中，可考虑使用sessionStorage或加密存储；

• 异步操作：Pinia的actions支持异步操作，无需像Vuex那样使用actions和mutations配合，简化了代码逻辑。在处理异步请求时，我会在actions中添加loading状态，用于控制页面的加载动画，提升用户体验；

• 状态共享：在组件中使用Store时，直接通过useUserStore()等函数引入对应的Store实例即可，无需像Vuex那样通过mapState、mapActions等辅助函数，代码更简洁、直观。

（4）数据请求与接口封装（Axios）

在实际项目中，页面的数据大多需要从后端接口获取，因此Axios的封装是核心技能之一。我在项目中对Axios进行了多层封装，实现了“统一配置、统一拦截、统一错误处理、按模块划分接口”的功能，提高了代码的复用性和可维护性。

第一层封装：Axios全局配置。我创建了Axios实例，从环境变量中读取接口基础地址，设置合理的请求超时时间；通过请求拦截器统一添加token到请求头，实现身份认证；借助响应拦截器统一处理响应结果，对错误码进行分类处理，如401 token过期时自动清除登录状态并跳转登录页，同时给出友好的错误提示，提升用户体验。

全局配置中，我还统一处理了请求发送失败和服务器错误的提示，避免重复编码；通过拦截器实现了请求与响应的统一管控，减少了组件中重复的请求处理逻辑，提升了代码复用性。

第二层封装：按业务模块划分接口。我将接口按业务场景拆分，如文章相关、用户相关、分类相关等，每个模块下封装对应的增删改查操作；为接口请求添加清晰的类型约束，明确请求参数和返回数据的格式，减少类型错误；通过这种模块化封装，让接口管理更清晰，便于后续维护和迭代。

每个业务模块的接口函数都对应具体的后端接口，统一使用封装好的Axios实例发送请求，明确请求方式、请求地址和参数传递方式；通过类型定义约束参数和返回值，让接口调用更安全，同时提升代码的可读性。

第三层封装：自定义Hook（useRequest）。为简化组件中的请求逻辑，我封装了useRequest Hook，整合了加载状态管理、错误处理、数据缓存、刷新重试等核心功能；支持配置是否立即执行请求、是否开启缓存、重试次数等参数，适配不同的请求场景；同时在组件卸载时自动取消未完成的请求，避免内存泄漏。

useRequest Hook的核心价值在于标准化请求流程，组件中使用时只需传入接口函数和配置参数，即可获取请求数据、加载状态、错误信息以及执行请求、取消请求的方法；缓存功能可减少重复请求，提升性能；重试机制则提高了请求的稳定性，尤其适用于网络环境不稳定的场景。

在组件中使用useRequest时，只需引入对应的接口函数和Hook，配置相关参数即可快速实现数据请求；对于分页查询等需要手动触发的请求，可通过调用Hook返回的execute方法实现，参数传递直观，状态管理清晰，大幅简化了组件内的请求逻辑。

例如在文章列表页面，通过useRequest加载文章数据，开启缓存减少重复请求；分页切换时，调用execute方法传入新的分页参数即可触发重新请求，加载状态可直接用于控制表格的加载动画，让数据请求与展示的逻辑更简洁。

表格展示时，直接绑定请求返回的文章列表数据，根据加载状态显示加载提示；分页组件的页码切换事件绑定handlePageChange方法，在该方法中调用execute传入新页码参数，实现分页数据的动态加载，整个流程无需重复编写请求相关的状态管理代码。

（5）组件封装与通信

组件化是Vue开发的核心思想，合理的组件封装能够提高代码的复用性、可维护性和开发效率。我在项目中总结了组件封装的“三原则”：单一职责原则（一个组件只负责一个功能）、高内聚低耦合原则（组件内部逻辑紧密相关，组件之间依赖尽可能少）、可复用可配置原则（组件支持通过props自定义属性，适应不同的使用场景）。

以项目中的ArticleCard（文章卡片）组件为例，封装思路如下：

• Props设计：定义title（文章标题）、summary（文章摘要）、createTime（发布时间）、author（作者）、category（分类）、tags（标签列表）、coverImage（封面图）等props，并添加类型约束和默认值；

• 事件设计：定义click事件，当用户点击文章卡片时，触发该事件并传递文章id；

• 插槽设计：为文章摘要和操作按钮预留插槽，支持自定义内容；

• 样式设计：使用Scoped CSS避免样式污染，支持通过props传递自定义样式类。

ArticleCard组件的核心设计：通过清晰的props定义，接收文章相关的核心信息，如标题、摘要、发布时间等，并添加类型约束和默认值确保数据规范；设计click事件实现卡片点击跳转功能，传递文章id供父组件使用；预留摘要和操作按钮插槽，支持自定义内容，提升组件灵活性；使用Scoped CSS避免样式污染，同时支持自定义样式类，适配不同的使用场景。

组件内部通过props接收数据后，按固定结构渲染文章封面、标题、摘要、元信息和标签等内容；点击事件触发时，通过emit向父组件传递文章id，由父组件处理具体的跳转逻辑；插槽的设计让组件不仅能满足默认展示需求，还能根据不同页面的需求自定义摘要展示方式和操作按钮，增强了组件的复用性和灵活性。

在组件通信方面，我根据不同的场景选择合适的通信方式：

• 父子组件通信：使用props（父传子）和自定义事件（子传父），这是最基础、最常用的通信方式；

• 兄弟组件通信：通过Pinia状态管理，将需要共享的数据存储在Pinia中，兄弟组件通过引入同一个Store来实现数据共享和通信；

• 跨层级组件通信：对于简单的跨层级通信，使用provide/inject API（父组件通过provide提供数据，子组件通过inject获取数据）；对于复杂的跨层级通信，使用Pinia状态管理；

• 无关联组件通信：使用事件总线（可通过创建一个Vue实例作为事件总线，或使用mitt库），但在大型项目中建议优先使用Pinia，避免事件总线导致的代码复杂度增加。

（6）权限控制

权限控制是后台管理系统的核心功能之一，我在项目中实现了“路由级权限控制”和“按钮级权限控制”两层权限控制机制：

• 路由级权限控制：通过Vue Router的路由守卫实现，在全局前置守卫中判断用户是否有权限访问当前路由。用户登录后，后端会返回用户的角色信息和可访问的路由列表，前端根据返回的路由列表动态生成路由规则，避免用户访问无权限的路由；

• 按钮级权限控制：封装一个自定义指令v-permission，根据用户的权限判断按钮是否显示。核心思路是：在自定义指令中获取用户的权限列表，对比当前按钮所需的权限，如果用户没有该权限，则隐藏按钮。

自定义指令v-permission的核心实现思路：在指令挂载时，获取用户的权限列表和当前按钮所需的权限；判断用户是否拥有该权限，若没有则隐藏按钮；对于管理员角色，默认赋予所有权限，无需逐一配置；通过这种方式，实现按钮级别的精准权限控制，确保不同角色只能看到自己有权限操作的按钮。

指令实现时，先从用户状态中获取当前用户的角色和权限列表，管理员角色直接拥有所有权限；对于普通用户，对比按钮所需权限与用户拥有的权限，不匹配时隐藏元素。这种实现方式无需在每个组件中重复编写权限判断逻辑，只需在按钮上添加指令并指定所需权限即可，简化了权限控制代码。

在组件中使用v-permission指令时，只需在按钮上添加该指令，并传入对应的权限标识，如添加文章对应“article:add”，删除文章对应“article:delete”；指令会自动根据用户权限判断按钮是否显示，实现权限控制的精准落地，同时让组件代码更简洁。

通过这种指令化的权限控制方式，不同角色登录后看到的操作按钮会自动适配其权限，无需在组件中编写复杂的条件判断；权限标识与后端保持一致，确保前后端权限控制逻辑统一，提升系统的安全性和可维护性。

（7）项目优化与上线部署

项目开发完成后，我进行了多方面的优化，以提升页面性能和用户体验：

1）性能优化

• 资源优化：

  • 图片优化：使用WebP格式图片（比JPG、PNG格式更小），实现图片懒加载（使用vue-lazyload插件），根据设备尺寸加载不同分辨率的图片；

  • 代码分割：通过Vite的构建配置，将第三方库（如Vue、Vue Router、Pinia）和业务代码拆分为不同的Chunk，实现按需加载；

  • 压缩资源：开启Vite的代码压缩功能，压缩JS、CSS、HTML文件，减少资源体积。

• 渲染优化：

  • 减少不必要的渲染：合理使用computed缓存计算结果，避免在模板中进行复杂的计算；使用v-once指令缓存静态内容，避免重复渲染；

  • 长列表优化：对于文章列表等长列表页面，使用虚拟列表（vue-virtual-scroller插件），只渲染当前视口内的列表项，减少DOM元素数量，提升渲染性能；

  • 异步组件：将非首屏组件（如后台管理页面的子组件）封装为异步组件，延迟加载，减少初始加载时间。

• 请求优化：

  • 接口缓存：对于不常变化的数据（如分类列表、标签列表），使用sessionStorage或localStorage进行缓存，避免重复请求；

  • 请求合并：将多个独立的请求合并为一个请求，减少HTTP请求次数；

  • 预加载：对于用户可能会访问的页面（如首页的热门文章），使用link标签的preload或prefetch属性预加载资源。

2）用户体验优化

• 加载状态反馈：在请求数据时显示加载动画（使用Element Plus的Loading组件），让用户知道页面正在处理；

• 错误处理：页面出错时显示友好的错误页面，请求失败时给出明确的错误提示；

• 响应式布局：使用Flex、Grid布局和媒体查询，适配不同尺寸的设备（电脑、平板、手机）；

• 动画效果：为页面切换、组件显示/隐藏等添加过渡动画，提升页面的流畅度；

• 键盘导航：支持键盘方向键切换轮播图、Tab键切换表单元素等，提升可访问性。

3）上线部署

我选择了Netlify作为项目的部署平台，它支持GitHub仓库自动部署，操作简单、免费易用。部署流程如下：

1. 在本地项目中执行npm run build命令，生成dist目录（打包后的静态资源）；

2. 将项目代码推送到GitHub仓库；

3. 在Netlify中注册账号并关联GitHub仓库；

4. 配置部署参数：构建命令为npm run build，输出目录为dist；

5. Netlify会自动拉取代码并完成构建和部署，生成可访问的在线地址。

对于需要后端服务的项目，我还尝试了将前端静态资源部署到阿里云OSS，后端服务部署到阿里云ECS，实现了完整的全栈项目上线。部署过程中需要注意的问题：配置OSS的CORS规则（解决跨域问题）、配置ECS的安全组（开放对应的端口）、使用Nginx作为反向代理（处理前端路由和后端接口请求）。

3. 提升阶段：生态拓展+源码学习，深化技术认知

当能够熟练开发企业级Vue项目后，我开始向“深度”和“广度”两个方向拓展自己的技术能力。深度上，学习Vue的源码和底层原理；广度上，学习Vue生态的相关技术，如Nuxt.js、VueUse、Vue Test Utils等，同时了解前端全栈开发的相关知识。

（1）Vue源码学习

学习Vue源码不是为了成为Vue贡献者，而是为了更深入地理解Vue的设计思想和工作原理，当遇到复杂问题时能够更快地定位和解决。我从Vue3的核心模块入手，重点学习了“响应式系统”“虚拟DOM”“编译模块”三个核心部分。

在学习响应式系统源码时，我通过阅读Vue3的reactive、ref相关源码，理解了Proxy代理机制的具体实现——当我们用reactive创建响应式对象时，Vue会创建一个Proxy实例，拦截对象的get、set、deleteProperty等操作。在get操作时，会调用track函数收集依赖（将当前的effect函数添加到依赖集合中）；在set操作时，会调用trigger函数触发依赖更新（执行依赖集合中的effect函数）。为了巩固这一知识点，我手动实现了一个简易版的响应式系统，包含reactive、ref、effect、track、trigger等核心函数。

学习虚拟DOM源码时，我了解到虚拟DOM是对真实DOM的抽象描述，它是一个JavaScript对象，包含tag、props、children等属性。Vue通过虚拟DOM计算出真实DOM的更新差异（diff算法），然后只更新需要变化的部分，从而提升渲染性能。我重点学习了Vue3的diff算法优化——相比Vue2的双端diff算法，Vue3的diff算法通过“最长递增子序列”优化了列表更新的性能，减少了DOM的移动操作。

（2）Vue生态技术拓展

• Nuxt.js：Nuxt.js是基于Vue的服务端渲染（SSR）框架，它解决了Vue单页应用的SEO问题和首屏加载速度慢的问题。我学习了Nuxt.js的基本使用，开发了一个简单的博客项目，体验了服务端渲染的优势——首屏加载速度大幅提升，搜索引擎能够正确抓取页面内容。

• VueUse：VueUse是一个基于Vue Composition API的实用工具集，包含了大量的常用功能，如useLocalStorage、useWindowScroll、useMouse、useRequest等。我在项目中引入了VueUse，使用useLocalStorage替代了手动操作localStorage的代码，使用useWindowScroll实现了滚动监听功能，大幅提升了开发效率。

• Vue Test Utils：Vue Test Utils是Vue的官方测试工具库，用于对Vue组件进行单元测试和集成测试。我学习了Jest和Vue Test Utils的基本使用，为项目中的核心组件（如ArticleCard、Pagination）编写了单元测试，确保组件的功能正确性，减少后续迭代带来的bug。

• Pinia高级用法：深入学习了Pinia的高级特性，如Pinia的插件开发、状态订阅、批量更新等，提升了状态管理的灵活性和可扩展性。

（3）前端全栈开发

为了提升自己的综合能力，我开始学习前端全栈开发，使用Node.js+Express搭建后端服务，实现了与Vue前端的对接。后端开发重点学习了以下内容：

• 接口开发：使用Express搭建RESTful API，实现了文章的增删改查、用户登录注册、权限管理等接口；

• 数据库操作：使用MongoDB作为数据库，学习了Mongoose的基本使用，实现了数据的增删改查、数据验证、关联查询等功能；

• 身份认证：使用JWT（JSON Web Token）实现用户身份认证，生成token并返回给前端，前端将token存储在localStorage中，每次请求时添加到请求头中，后端验证token的有效性；

• 部署上线：将后端服务部署到阿里云ECS，配置Nginx作为反向代理，实现了前后端项目的联动。

二、核心技能拆解：Vue建站全流程关键技术点

通过多个项目的实战，我总结出了Vue建站全流程的核心技能点，涵盖了从项目初始化到上线部署的每一个环节。这些技能点是企业前端开发中最常用的，也是Vue学习者必须掌握的核心内容。

1. 项目初始化与工程化

项目初始化是Vue建站的第一步，合理的工程化配置能够为后续开发奠定良好的基础。核心技能点包括：

• 构建工具选择：Vue CLI和Vite的区别与选择，Vite的优势（快速冷启动、即时热更新、按需编译）；

• 项目结构规划：规范的目录结构设计，按功能模块划分目录，提高代码的可维护性；

• 工程化工具配置：Vite配置（别名、跨域代理、CSS预处理器、构建优化）、ESLint和Prettier配置（代码规范检查与自动修复）、TypeScript配置（类型约束与推导）；

• 依赖管理：package.json的配置，依赖包的安装与更新，开发依赖与生产依赖的区分。

2. Vue3核心语法

Vue3是目前Vue的主流版本，其核心语法相比Vue2有了很大的变化，核心技能点包括：

• Composition API：setup函数、ref和reactive、computed和watch、生命周期钩子（onMounted、onUnmounted等）、provide和inject；

• Options API与Composition API的对比：Composition API的优势（更好的代码组织、更灵活的逻辑复用、更清晰的类型推导）；

• 响应式数据：ref（用于基本类型数据）、reactive（用于对象类型数据）