JA+-优快云博客

原创历时2年半，我造了一个基于 vue 的虚拟列表轮子？(stk-table-vue)

这两年接触到的行情展示需求特别多，也渐渐积累整理并封装了一个用于行情展示表格。因此，向大家介绍一个我封装的基于 sticky 的虚拟列表组件，及一点开发历程。StkTableVue文档Github 求star 🙏🙏🙏StkTableVued 的开发也参考了许多前辈，如vxe-tablenaive-ui下面介绍此表格的主要特点参考了中的自定义单元格，我在使用的过程中发现，相较于旧版vxe-table（新版好像也支持配置式了），配置很多的的插槽来说，在columns中配置自定义单元格的实现还是蛮优雅的。

2025-01-10 15:51:37 868

原创 Vue 3 ref(new Map()) 无法触发watch

Vue 3 ref(new Map()) 无法触发响应式更新

2025-03-07 16:05:28 260

原创从vue-cli 切换到rspack 构建性能到底提升了多少

项目环境项目环境vue-cli 中项目是vue2 的环境，使用babel转换jsx由于swc 暂不支持vue2 的jsx语法转换，以及babel-plugin-import 按需引入插件。因此这一部分代码仍使用 babel 转换。因此升级为rspack后，仍有小部分代码使用 babel-loader 进行转换。由于不方便截图项目具体信息，我这里仅给出打包成功后的控制台输出。

2024-12-20 13:39:13 427

原创 webpack 4 升级到5 url-loader require 图标不展示问题

去掉 require('xxx.png').default 中的default即可

2024-12-10 16:39:47 403

原创 echarts 横坐标类目轴，相同的日期只显示第一个，方案记录

横坐标的值为 yyyy-MM-DD HH:mm:ss如果直接使用这个字符串作为x轴的label来展示，那太占空间了。对于一些小的宽度小的图表不友好。因此，需要将，年、时、分、秒去掉只展示MM-DD。使用xAxis.axisLabel.formatter 函数即可实现。这样就带来了一个问题。会有许多重复的x label。

2024-10-21 19:23:51 521

原创 @vue/cli source and destination must not be the same

（删除vue-cli 的输出目录）打断点发现dist 目录下有index.html。

2024-06-05 16:57:43 442

原创 Rspack + vue 修改css代码不能热更新

使用了 rspack.config 中的 experiments.css:true（默认）自带的css 解析器貌似有bug，在保存的时候，不会热更新样式。关闭experiments.css: false。

2024-06-03 10:25:35 259

原创 vue 项目中大量的flushCallbacks 原因分析

setup 中定义了 const data = shallowRef()代码中多次更改了这 data.value = [xxx] 导致。

2024-04-11 16:22:59 722

原创 vue ts 项目vue文件中引入不识别 @ 路径别名

在include 中加上 vue 文件。否则vue 文件中不识别 @路径别名。tsconfig.json 配置中添加。

2024-04-09 17:30:24 430

原创 vue svelte solid 虚拟滚动性能对比

由于svelte solid 两大无虚拟DOM框架，在前端越来越有影响力。因此本次想要验证，这三个框架关于实现表格虚拟滚动的性能。一般情况下，vue3的性能已经足够普通项目使用。为了产品体验接近客户端（C++）实现看齐，有极致的性能场景可能需要更高性能的框架，甚至原生去实现。

2024-03-04 16:28:22 865

原创 pnpm 源不对 Will retry in 10 seconds. 2 retries left.

由于使用npm config set registry 切换淘宝源时，把地址打错了。后面使用pnpm install 时出现此时无论我怎么使用npm config set registry 或者pnpm config set registry 切回正确的源均没有效果。

2024-01-23 21:23:06 4907 1

原创 echarts 切换时出现上一次图形残留。

先说结果：悬浮高亮导致。这可能使echarts的bug。正常情况出现这种问题，一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。但是我这里始终配置notMerge: true，但仍然出现这种问题。最后发现与鼠标悬浮有关。

2024-01-05 13:57:39 1695

原创 THREE.js 导入glTF文件，界面中不展示模型

通过GLTFLoader 导入，再用scene.add(gltf.scene) ，界面中没有展示模型。控制台没有报错。glTF从blender中导出，不是压缩的，不用 DRACOLoader 处理。

2023-11-07 09:27:47 1840

原创 tauri 访问静态资源，响应头为Content-Type:‘text/html‘

Error: THREE.FBXLoader: Unknown format.

2023-11-02 23:45:40 444

原创 lightningcss 加速webpack失败

lightningcss-loader 加速webpack压缩css

2023-10-07 10:03:04 220

原创 @vue/cli-service ValidationError: Progress Plugin Invalid Options options should NOT have additional

删除node_modules删除package-lock.jsonnpm i上面执行了后还是不行。

2023-09-06 14:13:43 263

原创 vue3-styled-components inject导致死循环

vue3-styled-componets 中有 inject('theme') 为undefined。在最外层 provide('theme','');在低版本浏览器（chrome 49）中会造成死循环。

2023-09-01 11:18:27 615

原创 swc-loader Segmentation fault “$NODE_EXE“ “$NPM_CLI_JS“ “$@“

swc还不是很稳定。在swcrc 中有配置plugins 时，swc 转换 /node_modules/ 会报错。

2023-08-23 15:45:34 1385

原创使用rspack 替换webpack加速vue3项目构建

使用rspack 替换webpack5 来加速构建vue3项目。这是一个尝试。

2023-08-04 19:16:53 1757

原创 @vitejs/plugin-vue requires vue (＞=3.2.13) or @vue/compiler-sfc to be present in the dependency tree

node版本太低vue@3.2.x 在@vue/compiler-sfc 中加了私有类方法，在node12 下报错。使vue-loader 捕获到报错后触发日志。

2023-07-31 17:28:58 962 2

原创 webpack xxx is not a constructor

模块循环引用导致

2023-07-26 20:34:28 1153

原创 echarts 调整x类目轴axisLabel间距

调整axisLabel.width 控制横坐标间距

2023-07-24 19:48:34 4458

原创 webpack esbuild tree-shaking @vueuse/core失败替换方案

使用terser 配合swc进行压缩

2023-06-28 13:44:06 992

原创 vue jsx Cannot read property ‘__asyncLoader‘ of undefined

computed 的变量，在jsx中使用时未.value 导致。

2023-06-25 15:37:40 2670

原创 package.json 中的sideEffects 行为记录

本人用vite构建vue组件库项目，及在webpack项目中使用该组件库。发现Rollup(vite底层)与Webpack 对于sideEffects 的处理方式有些不同。sideEffect指定哪些文件具有副作用。

2023-06-20 22:29:16 1807

原创 vite + vue3 + storybook + ts 搭建vue组件库记录

由于我的目标是不使用babel-import-pluing 因此，完成这个效果，只需要在/lib/Button/index.js 文件的最上方引入/lib/Button/style.css即可。由于一个npm库需要有一个默认的入口js，因此需要在/lib 目录下面增加一个index.js 用于导入lib 下面所有组件，并导出。这个是构建一个组件的方法，因此，我只要通过node 的 fs 模块读取并分析/packages 路径下的文件夹，遍历出来构建即可。先制定一下增量构建的方案。以此仅构建变更过的组件。

2023-05-24 20:41:28 3067 8

空空如也

Webpack 配置babel usBuiltIns: 'usage' 能成功打包，但是浏览器执行有报错，为什么。