weixin_73060959的博客

原创 解决pageHelper分页失效问题

【代码】解决pageHelper分页失效问题。

原创 Vue3实现elementplus实现分页查询，组合式API写法

在Vue 3中使用Element Plus实现分页查询时，通常会利用组合式API（Composition API）来组织代码，使得逻辑更加清晰和模块化。以下是一个基本的示例，展示了如何在Vue 3项目中结合Element Plus的分页组件和组合式API来实现分页查询功能。首先，确保你的项目中已经安装了Vue 3和Element Plus。这样，你就完成了一个基本的分页查询功能的实现。

原创 value值没有根据下拉选择而改变

如果你不想使用计算属性，或者你需要执行一些额外的逻辑来更新。只是一个普通的 JavaScript 变量，它接收了。这种方法适用于你不需要在多个地方或组件中持久保持。来创建一个响应式的属性，该属性会自动根据。变化时执行额外的逻辑，并且你可以直接修改。中保持它的响应性，你可以直接在需要时传递。是一个计算属性，你不能直接修改它（即。如果你只是在某些函数或操作中需要。的值并不会自动更新，因为。的初始值，但之后就不再与。你可以使用 Vue 3 的。是一个 Vue 3 的。这里的关键是，当你改变。的响应性状态的情况。

原创 Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ he

当你的拦截器拦截到这种OPTIONS请求时，如果没有正确地处理（例如，返回正确的CORS头部信息），那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送，所以我们需要确保拦截器在处理OPTIONS请求时，返回正确的CORS头部信息。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求，它用于检查实际请求是否可以被服务器接受。使用axios请求，并在请求头添加token，发送请求，后端能成功接收请求，但请求头没有token，导致过滤器拿不到token进行校验。

原创 Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区

在Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区（甚至到更细分的级别，如街道、小区等）的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景，因为它支持多级联动。以下是一个基本的步骤和示例，说明如何在Vue 3项目中使用Element Plus的Cascader组件来实现省市区（甚至更多级）的联动选择。

原创 使用Pinia作为状态管理库来存储用户登录的token

在Vue.js应用中，使用Pinia作为状态管理库来存储用户登录的token是一种常见且推荐的做法。Pinia提供了比Vuex更加简洁和强大的API，特别适合于Vue 3。

原创 Element Plus设置表单字段为必填

在使用 Element Plus（一个基于 Vue 3 的 Element UI 组件库）时，设置表单字段为必填通常涉及到两个方面：表单验证（Validation）和表单字段的提示信息。Element Plus 提供了强大的表单验证功能，通过。如果验证通过，则执行相应的操作（如提交表单）；来表示该字段为必填项，并定义了当该字段为空时显示的提示信息。在这个示例中，我们定义了一个包含用户名和邮箱的表单。字段，我们同样设置了必填规则，并额外添加了邮箱格式验证。属性定义了触发验证的时机，方法中，我们通过调用。

原创 elementplus表单位置居中

要使Element Plus表单居中显示，可以使用Flexbox布局。确保表单至少有100%的视口高度，即使内容不够也会占满整个视口。属性来使表单在页面中水平和垂直居中。是为了让表单项垂直排列。

原创 项目中使用 Element Plus

Element Plus 提供了基于 ES Module 的开箱即用的。如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。在引入 ElementPlus 时，可以传入一个包含。并且只使用组件 API，你需要手动导入样式。您需要使用额外的插件来导入要使用的组件。，然后您就可以使用打包工具，例如。如果您使用 Volar，请在。用于设置表单组件的默认尺寸，然后把下列代码插入到你的。用于设置弹出组件的层级，) 和配置工具，请参考。属性的全局配置对象。

原创 npm 下载依赖慢的解决方案（亲测有效）

当使用npm下载依赖包时遇到速度过慢的问题，可以尝试更换npm镜像源、使用cnpm或yarn、检查网络环境或使用npm加速工具等方法来解决。如果问题仍然存在，可能需要进一步检查npm的配置或咨询相关技术支持。

原创 router实现数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

原创 Vscode推送代码到 Gitee

在Visual Studio Code (VSCode) 中推送代码到 Gitee（一个类似于 GitHub 的代码托管平台，主要面向中国开发者）可以通过以下步骤完成。这通常涉及到使用 Git 作为版本控制系统，并通过 SSH 或 HTTPS 方式与 Gitee 仓库进行交互。

原创 Vue Router 和 组合式 API

Vue 的的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问this和组件内导航守卫。

原创 RouterView 插槽

RotuerView 组件暴露了一个插槽，可以用来渲染路由组件：template上面的代码等价于不带插槽的，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。

原创 Vue3项目模块划分

原创 实现＜script＞标签使用name绑定组件名称

在vite.config添加配置import VueSetupExtend from 'vite-plugin-vue-setup-extend'后续可以在标签使用name对组件命名。

原创 Vue3: customRef自定义响应数据

创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。预期接收一个工厂函数作为参数，这个工厂函数接受track和trigger两个函数作为参数，并返回一个带有get和set方法的对象。一般来说，track()应该在get()方法中调用，而trigger()应该在set()中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

原创 Vue3:通信组件

传递玩具给父亲

原创 Pinia：$subscribe()的使用场景

意思是，当组件被卸载时，它们将被自动删除。如果要在卸载组件后保留它们，请将。绑定到添加它们的组件（如果 store 位于组件的。之后触发一次（例如，当使用上面的函数版本时）。方法查看状态及其变化，类似于 Vuex 的。可以通过 store 的。作为第二个参数传递给。

原创 Pinia：$patch的使用场景

但是，使用这种语法应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。中，并且可以进行 time travelled（在 Vue 3 中还没有）。允许您将批量更改的日志写入开发工具中的一个条目中。修改 store，你还可以调用。

原创 Pinia入门（快速上手）

在深入了解核心概念之前，我们需要知道 Store 是使用定义的，并且它需要一个唯一// useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 id})这个name，也称为id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为use...是跨可组合项的约定，以使其符合你的使用习惯。

原创 Vue3搭建pinia环境

在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。

原创 Vue3中使用UUID(快速上手)

【代码】Vue3中使用UUID(快速上手)

原创 Vue3:编程式导航

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

原创 Vue3:命名路由

如果为多条路由添加相同的命名，路由器只会保留最后那一条。Vue Router 有很多其他部分可以传入网址，例如。当创建一个路由时，我们可以选择给路由一个。属性一样，这些方法也支持通过。上述示例将创建一个指向。

原创 异常：找不到模块“@/views/HouseDetail.vue”或其相应的类型声明。ts(2307)

原因：在配置Vue项目路由，特别是使用TS时，可能会遇到模块声明错误。为了解决‘找不到模块’的ts(2307)错误，可以在src目录下创建vite-env.d.ts文件，然后引入特定代码来声明*.vue文件为Vue组件，允许通过import导入。这样通常能解决无法识别模块的问题。解决：在src目录下创建vite-env.d.ts的文件，添加如下代码重启即可。

原创 router使用场景：组件 API 风格

Vue Router 可以使用组合式 API 或选项式 API。在必要时，示例将会同时使用两种风格，组合式 API 示例通常会使用。在模板中，组件的名字可以是 PascalCase 风格或 kebab-case 风格的。文件) 的应用中使用。本教程大多数的示例都是如此，但是 Vue Router 本身并不要求你使用构建工具或单文件组件。在应用中，访问该对象的方式取决于上下文。例如，在组合式 API 中，它可以通过调用。的，因此它们不需要在组件模板中导入。基于不同 API 风格的组件，它可以通过。

原创 Vue3的router实战演练

Vue Router 是 Vue 官方的客户端路由解决方案。客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。Vue Router 基于 Vue 的组件系统构建，你可以通过配置来告诉 Vue Router 为每个 URL 路径显示哪些组件。

原创 Vue3的v-if和v-show

v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。你也可以使用v-else为v-if添加一个“else 区块”。一个v-else元素必须跟在一个v-if或者v-else-if元素后面，否则它将不会被识别。v-else-if顾名思义，v-else-if提供的是相应于v-if的“else if 区块”。和v-else类似，一个使用v-else-if的元素必须紧跟在一个v-if或一个v-else-if元素后面。

原创 Vue3:计算属性

更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。模板中的表达式虽然方便，但也只能用来做简单的操作。一个计算属性的声明中描述的是如何根据其他值派生一个值。若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于。计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。

原创 Vue3的hooks实战演练

【代码】Vue3的hooks实战演练。

原创 Vue3生命周期钩子:与Vue2相比优化了创建

与Vue2不同点：1.创建和创建前，由setup完成了2.命名由on开头使用方式注意所有罗列在本页的 API 都应该在组件的setup()阶段被同步调用。

原创 Vue3的Hooks的使用创建（组合式API的灵魂）

然而，Vue 的组合式函数是基于 Vue 细粒度的响应性系统，这和 React hooks 的执行模型有本质上的不同。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。保留该功能只是为了项目迁移的需求和照顾熟悉它的用户。在某种程度上，你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。如果你更希望以对象属性的形式来使用组合式函数中返回的状态，你可以将返回的对象用。

原创 Vue3的Props使用场景

如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。选项的值是相同的，两种声明方式背后其实使用的都是 props 选项。

原创 Vue3:computed()使用场景

接受一个，返回一个只读的响应式对象。该 ref 通过.value暴露 getter 函数的返回值。它也可以接受一个带有get和set函数的对象来创建一个可写的 ref 对象。

原创 Vue3：watch()使用场景

第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发，你需要使用。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。第一个参数是侦听器的。

原创 Vue3:toRefs()使用教程

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用。使用.value获取属性并修改。

原创 Vue3:reactive() 的局限性

由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。：它只能用于对象类型 (对象、数组和如。作为声明响应式状态的主要 API。由于这些限制，我们建议使用。

原创 Vue3:为什么要使用 ref？

在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。为了解释这一点，我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。

原创 创建一个 Vue 应用

如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。虽然本指南中的许多示例只需要一个组件，但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。