jieyucx-CSDN博客

原创 uniapp云打包app使用sqlite实现本地缓存，以及云打包sqlite不生效踩坑记录

SQLite是一种轻量级的关系型数据库管理系统。它是一个自包含、无服务器的数据库引擎，可以在客户端程序中直接嵌入，并且不需要独立的数据库服务器进程。SQLite使用简单的SQL语言，支持大多数标准的SQL语法和功能，包括事务、索引和触发器等。SQLite的数据库以单个文件的形式存储在主机文件系统中，可以轻松地将数据库文件在不同的设备间进行传输和共享。由于其小巧、快速、灵活和可移植的特性，SQLite广泛用于各种嵌入式系统、移动应用程序和其他小型项目中。

2023-10-10 11:58:17 2557

原创 rollup打包vue文件报错[!] (plugin commonjs--resolver) RollupError:xxxx,src/test.vue?vue&type=template&id=0f

中已经配置了解析vue相关插件，但是还是报错。rollup打包vue文件报错，如上图。

2023-10-08 17:13:22 3125

原创 uniapp中map使用点聚合渲染marker覆盖物

当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。点聚合官网教程// 创建map对象// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})enableDefaultStyle: false, // 是否使用默认样式zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别。

2023-08-16 11:11:32 4871 5

原创 vue3中使用jsx

安装Vue 3：使用Vue CLI创建一个新项目或通过npm安装Vue。配置Vue JSX插件：在创建的项目中，找到src.jsx。

2023-07-05 17:21:40 3137

原创 webpack提高构建速度之打包开启多进程（thead）

Webpack的多进程打包是通过利用多个子进程同时处理不同的模块来加速打包过程的技术。这种技术可以提高打包效率，减少等待时间，使得项目构建更快。使用多进程打包的好处在于，它可以将一些比较耗时的操作分配到不同的进程中进行并行处理，从而提高打包效率。这使得打包过程更加高效，节省了时间和资源。另外，和单进程打包相比，多进程打包也有助于避免进程卡死或异常终止的问题。对于大型项目或需要进行复杂操作的项目，采用多进程打包可以更快地完成项目构建，提高效率，减少等待时间，使开发人员可以更快地检验代码。

2023-06-17 11:02:37 2320 2

原创 vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件

vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件

2022-12-05 14:48:22 8356

原创 vue中循环表格数据，出现数据联动现象。

问题描述：如图我输入期数为4，会循环出来4个表格，其中名额分配一栏人数是可以编辑的，但是当我修改第一个表格的数据之后，后面的表格数据也跟着修改了。源码如下问题原因你遇到的问题是因为在生成多个表格时，所有表格的数据都引用了同一个对象或数组，导致数据联动现象。要解决这个问题，你需要确保每个表格的数据是独立的副本，而不是引用同一个对象或数组。解决方案代码如下

2024-11-07 15:07:07 982

原创 Network面板的Waterfall（瀑布流）视图

需要注意的是，Waterfall图中的每个节点颜色可能因浏览器版本和设置而异，但上述阶段和含义是普遍适用的。通过分析Waterfall图，开发者可以定位页面加载过程中的性能瓶颈，并采取相应的优化措施。例如，如果DNS解析时间过长，可以考虑优化DNS设置或更换DNS服务器；在谷歌浏览器的调试控制台中，Network面板的Waterfall（瀑布流）视图展示了页面加载过程中各个资源请求的时间线和相关信息。Waterfall图中的每个节点代表了一次网络请求的不同阶段，这些阶段共同构成了请求的总耗时。

2024-09-25 14:41:28 900

原创 vite项目配置本地开发使用https访问

方法允许网页直接访问用户的媒体输入设备，但出于安全考虑，这一功能通常要求在HTTPS环境下运行。如果你正在使用Vite作为你的开发服务器，并希望在本地开发过程中测试这一功能，那么配置Vite以支持HTTPS访问就变得尤为重要。在现代Web开发中，保护用户隐私和数据安全是至关重要的。特别是在涉及到媒体捕获功能，如使用用户的摄像头或麦克风时，Web应用需要遵循严格的安全准则。

2024-09-04 16:57:59 2475

原创 uniapp和vue3中使用vConsole在H5中开启移动端调试

【代码】uniapp和vue3中使用vConsole在H5中开启移动端调试。

2024-09-04 16:45:02 912

原创常用工具网站之Emoji

举例说明：在这个网站上，可以找到不同类型的奖牌表情符号，例如金牌🥇、银牌🥈、铜牌🥉等。用户可以用这些表情符号来表示获得奖项、胜利或者优秀表现等含义。通过这些表情符号，用户可以更加生动和直观地表达自己的情感和想法。是一种表情符号，最初起源于日本，现在已经被广泛应用于全球的通讯工具中，如手机、社交媒体、电子邮件等。它们可以用来表达情感、传达信息或增添趣味性。这个网站是一个收集和展示所有表情符号的网站。用户可以在这里找到各种不同类型的表情符号，并了解它们的含义和用法。

2024-08-28 21:01:44 555

原创 vue3中批量下载文件（压缩包）功能

在这篇博客文章中，我们将介绍如何在vue3中是实现批量下载文件（压缩包）功能，并将多个文件打包成一个 ZIP 文件进行下载。我们将创建一个自定义的 hook，并展示如何在组件中使用它。在开始之前，我们需要安装一些必要的依赖包：使用 npm 安装这些依赖：或者使用 yarn：2. 创建 Hook首先，我们需要创建一个自定义的 hook。这个 hook 将帮助我们下载文件并将它们打包成一个 ZIP 文件。3. 使用 Hook接下来，我们将在一个 Vue 组件中使用这个 hook。我们将创建一个

2024-08-28 17:48:43 1813

原创 Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking event handler a

被动模式的事件监听器可以提升滚动性能，因为它们不会阻止浏览器在事件触发时进行默认的滚动行为。这个警告是因为在监听滚动事件时，没有指定事件处理程序为被动的(passive)，可能会导致页面滚动时出现性能问题。从源头讲在添加事件监听的地方，为事件处理程序加上一个对象，包含passive: true的属性，表示这个事件处理程序是被动的。这在某些情况下可能是必要的，例如需要阻止触摸事件的默认滚动行为。具体来说，它的作用是确保所有添加的事件监听器的 passive。是一个接口，所有可以接收事件的对象（如。

2024-08-20 12:36:38 2637

原创 vite构建vue3项目hmr不生效问题踩坑记录

关于热更新不生效问题，我查询了很多，有以下几点可能导致vite的hmr不生效（在Vite构建的Vue 3项目中，如果HMR（热模块替换）不生效，可能由多种原因导致。

2024-07-25 20:56:39 1332

原创 Vue 3 中的拖拽排序功能实现

在Vue组件的部分，我们首先需要定义一组问题和一个用于记录当前被拖拽元素索引的响应式引用。{ id: 1, text: '问题 1' },{ id: 2, text: '问题 2' },{ id: 3, text: '问题 3' },{ id: 4, text: '问题 4' }]);// 被拖拽元素的索引通过以上步骤，我们成功在Vue 3中实现了一个简单的拖拽排序功能。Vue的响应式系统和组件化特性使得这样的功能实现起来既直观又高效。

2024-07-24 09:05:41 1677

原创 Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

在这篇博客中，我们将展示如何使用 Vue 3 实现一个简单的页面布局，其中左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都非常常见，比如目录导航、问答系统等。实现跳转功能在点击左侧列表项时，我们需要跳转到右侧对应的内容区域。为此，我们需要：结论通过以上步骤，我们成功实现了一个简单的 Vue 3 页面布局，左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局和滚动效果在实际开发中非常常见，希望这篇博客对你有所帮助。

2024-07-23 12:05:48 1856

原创自定义鼠标禁用样式踩坑`pointer-events: none；` 和 `cursor: not-allowed属性共用问题

在CSS中，和这两个属性虽然都涉及到用户与元素的交互，但它们的作用和目的并不相同，因此它们是可以同时使用的，但实际效果可能会有些出乎意料，具体取决于你的使用场景。这个属性用于定义在何种情况下元素可以成为鼠标事件的目标。设置为none时，意味着鼠标事件（如点击、悬停等）会“穿透”该元素，就像它不存在一样。这通常用于创建透明的点击区域或者使某个元素不可交互。这个属性用于改变鼠标指针的样式，当设置为时，鼠标指针会变成一个圆圈加斜杠的图标，表示该元素或操作不被允许。

2024-07-23 09:53:04 1116

原创浏览器禁用了自动全屏Failed to execute ‘requestFullscreen‘ on ‘Element‘: API can only be initiated by a user...

这个错误信息指的是在Web开发中，尝试通过JavaScript代码调用方法来使一个元素进入全屏模式时，这个调用没有成功，因为它违反了浏览器的安全策略。

2024-07-22 20:31:12 1470

原创 JavaScript中的解构赋值：用途与优势

解构赋值是JavaScript中一个非常强大且实用的特性，它简化了数组和对象数据的访问，使得函数能够返回多个值，并且与扩展运算符结合使用时，能够实现更灵活的数组和对象操作。同时，解构赋值还支持默认值和嵌套解构，进一步增强了其灵活性和实用性。掌握解构赋值，将使你的JavaScript代码更加简洁、高效和易于维护。

2024-07-06 16:20:57 414

原创 Vue 3 中集成 ECharts(附一些案例)

在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。

2024-07-05 10:34:38 14986

原创你真的了解http吗（一）？

HTTP（超文本传输协议）是一种用于分布式、协作式、超媒体信息系统的应用层协议。它是Web技术的基础，允许用户获取如文本、图像、音频和视频等资源。HTTP遵循客户端-服务器模型，客户端打开一个连接以发出请求，然后等待直到收到服务器的响应。主要特点无状态性：每次请求之间是独立的，服务器不会保存之前的交互信息。这意味着每个请求都必须包含所有必要的信息，服务器才能理解和响应。可扩展性：HTTP允许传输任何类型的数据，只要双方都知道如何处理这些数据。请求/响应模型。

2024-06-18 16:00:20 1074

原创 vxe-table展开行嵌套子表，每个子表的数据都是接口获取，每次展开的子表的数据都不同。

要解决这个问题，你需要为每一行的展开内容维护一个独立的数据状态。这意味着每当你展开一行时，你应该检查是否已经为这一行加载过数据。如果已经加载过，就使用已有的数据；如果没有，就从接口获取数据并存储起来，以便下次展开时使用。// fetchDataForExpandRow 是你的 API 调用函数。// 如果行被展开且该行数据未加载，则调用接口获取数据。对象用于存储每行的展开数据。中，以便下次展开时直接使用，避免重复调用API。// 存储每行展开数据的对象。// 展开行事件处理函数。// 将获取到的数据存储。

2024-06-13 11:25:48 1310

原创数据结构和算法之数组和链表

数组是一种线性数据结构，它是由一组连续的内存单元组成的，用于存储相同类型的数据。在JavaScript中，数组可以包含任意类型的数据，不只限于基本数据类型。

2024-06-07 11:16:19 925

原创 element-plus日历组件el-calendar自定义内容，每天绑定不同的值

【代码】element-plus日历组件el-calendar自定义内容，每天绑定不同的值。

2024-06-05 09:18:45 1512

原创 element-plus中el-dialog使用::v-deep()穿透设置样式不生效踩坑记录

如上：我想去掉插槽自带的下边框和上边框，但是不生效。给el-dialog加个类，在不带scope的。

2024-05-29 09:19:40 1713 2

原创 element-plus中el-tabel中使用el-image层级重叠问题踩坑记录

【代码】element-plus中el-tabel中使用el-image层级重叠问题踩坑记录。

2024-05-29 09:07:50 580

原创 vue3中基于element-plus封装一个表格弹框组件，要求可以单选和多选table数据

单选：多选：弹框表格组件代码这里多啰嗦一句，我这里是自定义列，使用单选框的方式实现的为什么要这样呢，因为我开始是使用多选加反选的方式实现单选，但这样存在一个bug，就是多选框的表头有个全选按钮，点击那个全选的时候会出现反选的问题。

2024-05-23 14:54:20 1617 1

原创 vue3项目中使用vxe-table的自定义打印方法实现打印发票功能

vxe-table官方文档，全局安装教程$print({sheetName: '打印自定义模板',content: `我是合同`});可以接受一个配置对象作为参数。这个配置对象可以包含以下属性：sheetName：打印的工作表名称。style：自定义的CSS样式。content：打印的内容。

2024-05-20 10:43:44 2250 3

原创使用vue-i18n控制台报黄：You are running the esm-bundler build of vue-i18n. It is recommended to configure yo

你正在运行vue-i18n的ESM（ES模块）捆绑构建版本。建议配置你的打包工具（bundler），以明确地将特性标志（feature flag）全局变量替换为布尔字面量，以便在最终捆绑包中获得正确的“树摇”（tree-shaking）效果。这里的“树摇”（tree-shaking）是Webpack等现代JavaScript打包工具中的一个概念，它可以在打包过程中移除未使用的代码（即“摇掉”这些代码），从而减小最终生成的包的大小。

2024-05-15 10:20:11 2369

原创常用工具方法之从树形结构的数据中提取所有的children子节点

3.如果 item 有 children 属性，那么就把 children 中的所有元素添加到 result 中，然后对 children 调用 extractChildren 方法，把 children 中的子节点也添加到 result 中。这个方法接收一个参数 data，这个参数应该是一个数组，数组的每个元素都是一个对象，这个对象可能有一个 children 属性，这个属性也是一个数组，包含了这个对象的子节点。4.最后，返回 result，这个数组包含了 data 中所有的子节点。

2024-04-29 15:57:42 527

原创 vue3中使用useStore()获取vux中的store踩坑记录

是否在setup函数下，不可以在setup里的函数的内部，写在函数内部的话就会出现，获取不到store对象的情况，useStore这个方法的调用位置是有要求的，它只能在setup函数中调用，这是它的语法规定。，在下面打印‘store’时，组件会被渲染两次，打印两次，第一次可以打印出来值，第二次是个。如上述代码，我在setup中的计算属性函数中嵌套使用了。放到setup中定义就可以了。

2024-04-25 11:41:57 1132 1

原创 nvm报错获取 ‘https://npm.taobao.org/mirrors/node/index.json‘ 时失败

由于npm.taobao.org域名HTTPS证书到期更换为npmmirror.com。找到nvm安装路径的settings.txt文件。打开添加或者更改镜像地址，报存就好啦。更改好之后，再次使用nvm就好了，如下。

2024-04-22 16:00:57 1199 1

原创前端常见面试题之vue3

对于Composition API和Options API的选择，取决于项目的需求以及开发团队的习惯。对于小型项目或者初学者来说，Options API可能更容易上手，而对于大型项目或者有一定经验的开发者来说，Composition API可能更适合，因为它更灵活、模块化和可维护。举例来说，假如一个组件中需要定义多个响应式变量和方法，使用Options API可能会导致代码量庞大，难以维护。而使用Composition API可以将相关的响应式变量和方法组织在一起，使代码更加模块化和可复用。

2024-02-23 15:36:38 2960

原创前端常见面试题之react高级特性（Portals、Context、HOC等）

通常情况下，React组件会被渲染到它们的父组件的DOM结构中，但有时我们希望将某个组件渲染到DOM结构的其他位置或根节点上，这时就可以使用Portals。在上面的示例中，fetchPosts函数是一个异步action创建函数，它返回一个函数，这个函数内部执行异步操作，获取数据后分发相应的成功或失败action。HOC是一个函数，接受一个组件作为参数并返回一个新的增强组件。在上面的例子中，当shouldComponentUpdate返回false时，新的项不会被添加到列表中，从而避免不必要的组件更新。

2024-02-22 17:06:10 988

vxetable自定义打印发票

vue3，element-plus，弹框表格组件，支持分页，单选，多选表格数据

空空如也