Wanxy Blog - 默认分类
type: channel
link: https://www.wanxy.online/index.php/category/default/
description: 只是一个默认分类
items: 个人封装的组件库
items: 关于Vue2中使用Web Worker【热更新】

个人封装的组件库
type: item
date: 2025-05-10T11:14:00+08:00
description: WanxyDesign项目地址官网地址http://design.wanxy.online/githubhttps://github.com/wanxy420/wanxy-designnpmhttps://www.npmjs.com/package/wanxy-design介绍为了方便平时项目中重复封装使用，自定义封装了这个组件库，部分组件基于原生开发，部分组件基于element-plus进行二次封装，优化使用时的便捷，减少代码量目前功能右键菜单简单贴一下代码 菜单面板1 菜单面板2 Json数据展示组件有待优化，欢迎大家github提交issue信息内容展示组件用于备注类信息展示计划公告无限轮播基于ele二次封装的pro table基于ele二次封装的pro form结尾这次组件的封装也学习到了很多的东西vitepress和组件的发布，封装组件的思想和业务组件也是不同，欢迎交流学习，后续也会更新更多的组件

关于Vue2中使用Web Worker【热更新】
type: item
date: 2025-04-27T10:03:00+08:00
description: 环境配置安装npm install worker-loaderconfig配置module.exports = { chainWebpack: (config) => { config.module .rule("worker") .test(/\.worker\.js$/) .use("worker-loader") .loader("worker-loader") .options({ inline: "fallback", }) .end(); config.module.rule("js").exclude.add(/\.worker\.js$/); } }开始编写worker文件我这边在项目的src/worker文件夹中创建应该test.worker.jstest.worker.js的// 接受主线程发送的通讯 self.addEventListener("message", (e) => { const data = e.data; self.postMessage("线程向主线程发送信息"); // 向主线程发送通讯 self.terminate(); // 关闭当前线程 });主线程项目文件，这里使用App.vue import TestWorker from '@/worker/test.worker.js' export default { name: "App", mounted() {}, methods: { handleStartWorker() { const worker = new TestWorker(); worker.postMessage("向子线程发送通讯"); worker.addEventListener("message", (e) => { console.log(e) // 接受子线程发送的通讯数据 }) } }, };