埋点,自己写插件,自己写的按钮埋点,掘金同款投递简历

20分钟掌握 Vite 插件开发 - 掘金  vite的生命周期啥的

1.浏览器的控制台输出有样式的字

// const randomLetterPlugin = ()=>{
//     const letters = ['wwwwwww','000000000000','888888888888'];
//     //随机获取一个字符并打印
//     const printRandomLetter = ()=>{
//         const randomIndex = Math.floor(Math.random() * letters.length);
//         const randomLetter = letters[randomIndex];
//         console.log(`Random Letter:${randomLetter}`);
//     };//     return{
//         name:'random-letter-plugin',
//         configureServer(server){
//             //在服务器启动时立即执行
//             printRandomLetter();
//         }
//     }
// };// export default randomLetterPlugin;const randomLetterPlugin = ()=>{const letters = ['我猜你就会点开控制台','你找我有啥事吗','看到你看了,我猜你又出bug了'];//随机获取一个字符并打印const printRandomLetter = ()=>{const randomIndex = Math.floor(Math.random() * letters.length);const randomLetter = letters[randomIndex];console.log(`Random Letter:${randomLetter}`);return `Random Letter:${randomLetter}`};return{name:'random-letter-plugin',configureServer(server){//在服务器启动时立即执行printRandomLetter();},transform(code,id){console.log('--------------------------');console.log(id);if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}\nif (typeof window !== 'undefined'){// 在这里添加你的逻辑const letters = ['wwwwwww','000000000000','888888888888'];const printRandomLetter = ()=>{const randomIndex = Math.floor(Math.random() * letters.length);const randomLetter = letters[randomIndex];return randomLetter};console.log('%c' + printRandomLetter(),'color:#1e80ff;font-size:20px;background:#fff;border-radius:5px;padding:5px 10px;');}`;}//这里自己写的用不了,gpt生成的可以// if(id.endsWith('main.js')){//     console.log('==========================');//     return `${code}\nif ( typeof window !== 'undefined'){//         const letters = ['wwwwwww','000000000000','888888888888'];//         const printRandomLetter = ()=>{//             const randomIndex = Math.floor(Math.random() * letters.length);//             const randomLetter = letters[randomIndex];//             return randomLetter//         };//         console.log(printRandomLetter());//     }`// }return code;}}
};export default randomLetterPlugin;import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import randomLetterPlugin from './plugins/randomLetterPlugin.js'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), randomLetterPlugin()],
})

2.自己写的按钮埋点

页面中有很多原生的按钮和element plus的按钮

const randomLetterPlugin = ()=>{return{name:'random-letter-plugin',transform(code,id){if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}if (typeof window !== 'undefined'){const buttons = document.querySelectorAll('button');// 遍历所有按钮,并为每个按钮添加点击事件buttons.forEach((button,i) => {button.addEventListener('click', () => {// 输出按钮中的文字console.log(button.textContent);});});}`;}return code;}}
};export default randomLetterPlugin;

3.掘金同款投递简历

const randomLetterPlugin = ()=>{return{name:'random-letter-plugin',transform(code,id){if (id.endsWith('main.js')) {// 如果是 main.js,则在代码末尾添加一段逻辑return `${code}if (typeof window !== 'undefined'){console.log('%c欢迎投递方头有限责任公司: https://www.baidu.com/','color:#1e80ff;background:#fff;');}`;}return code;}}
};export default randomLetterPlugin;

vite 有个transform钩子还是什么的生命周期你可以在里面参一脚
export default function requirePlugin() {return {name: "vite-plugin-vue-requireToUrlPlugin",transform(code:string, id:string) {const vueRE = /\.tsx$/;const require = /require/g;if (!vueRE.test(id) || !require.test(code)) return code;const requireRegex = /require\((.*?)\)/g;const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");return finalCode;},};
}

神策

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/2192.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP校验15位和18位身份证号

第十八位数字的计算方法为: 1.将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分 别为:7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 2.将这17位数字和系数相乘的结果相加。 3.用加出来和除以11,看余数是多少? 4…

一篇文章学会 MySQL UNION

组合查询 UNION UNION 运算符用于合并两个或多个 SELECT 语句的结果集,去除重复行。它在 SQL 中非常有用,可以用于多种场景,例如: 1. 从不同的表中获取相似数据: 假设有两个表,customers 和 leads,都包含…

智能小车-轮趣wheeltec(原版代码)

上一届大佬的 红绿灯识别代码,此代码需要在ubuntu系统下,与ROS配合使用: Xtrak 塔克小车巡线代码以及红绿灯识别相关小改动_search_top0 mask-CSDN博客 line.follow原版 源代码: #------------------------------------------…

现代C++新特性——constexpr

在计算机科学中,字面量(literal)是在源代码中的 value 的文本表示。字面量和变量、常量是同一个级别的概念,常被用于初始化变量。字面量是编译期常量,效率极高。 常量表达式(const expression)是…

【MySQL 数据宝典】【磁盘结构】- 005 Undo log 撤销日志

一、基本介绍 ​ 每当我们要对一条记录做改动时(这里的改动可以指 INSERT 、 DELETE 、 UPDATE ),都需要留一手 -> 把回滚时所需的东西都给记下来 ​ 你插入一条记录时,至少要把这条记录的主键值记下来,之后回滚的…

【后端】django查询时的性能优化技巧

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、为什么需要性能优化二、性能优化的常用技巧三、总结 前言 随着开发语言的不断普及,越来越多的项目建设场景会遇到性能瓶颈,本文就介…

自定义数据 微调CLIP (结合paper)

CLIP 是 Contrastive Language-Image Pre-training 的缩写,是一个擅长理解文本和图像之间关系的模型,下面是一个简单的介绍: 优点: CLIP 在零样本学习方面特别强大,它可以(用自然语言)给出图像…

【深度学习】行人跌倒行为检测软件系统

行人跌倒检测系统在各个领域的应用都对社会的整体健康、安全和福祉产生积极影响,为人们的生活和工作提供了更加安全和可靠的环境, 本文主要使用YOLOV8深度学习框架自训练了一个“行人跌倒检测模型”,基于此模型使用PYQT5实现了一款界面软件用…

Visual Studio2022中使用水晶报表

1.创建水晶报表项目 选择需要的表 自动生成连接 选项:可跳过 后续还有一些 都能跳过 看你自己的需求 自己选的样式

Linux中的高级IO函数(三)fcntl

Linux提供了很多高级的I/O函数。它们并不像Linux基础I/O函数(比如open和read)那么常用(编写内核模块时一般要实现这些I/O函数),但在特定的条件下却表现出优秀的性能。这些函数大致分为三类: 用于创建文件描…

39. 【Android教程】触摸事件分发

用户在使用 Andriod 系统的时候会不断的和我们的 App 进行各种类型的交互(类似点击、滑动等等),“事件”就是一个非常有效的用来收集用户行为的方式。在前面章节有提到过:Android 系统采用一个先进先出(FIFO&#xff0…

使用IPEX-LLM加速大语音模型LLM

IPEX-LLM是一个用于在英特尔CPU和GPU(如本地PC的iGPU、独立显卡如Arc、Flex和Max)上加速本地LLM推理和微调的PyTorch库。 IPEX-LLM是BigDL-LLM的升级版。IPEX-LLM基于英特尔PyTorch扩展库(IPEX)以及llama.cpp、bitsandbytes、vLL…

PostgreSQL 免费的对象-关系数据库

目录 一、什么是数据库 二、ORDBMS 的一些术语 三、PostgreSQL 概述 四、PostgreSQL数据库优点和缺点 4.1PostgreSQL数据库的优点 4.2PostgreSQL数据库的缺点 4.3PostgreSQL 特征 五、Linux 上安装 PostgreSQL 5.1Yum 安装 PostgreSQL 5.1.1安装postgreSQL的官方yum仓…

54、图论-实现Trie前缀树

思路: 主要是构建一个trie前缀树结构。如果构建呢?看题意,应该当前节点对象下有几个属性: 1、next节点数组 2、是否为结尾 3、当前值 代码如下: class Trie {class Node {boolean end;Node[] nexts;public Node(…

Jammy@Jetson Orin - Tensorflow Keras Get Started

JammyJetson Orin - Tensorflow & Keras Get Started 1. 源由2. 步骤3. 预期&展望4. 总结5. 参考资料 1. 源由 之前过年的时候,花了两周的时间过了一遍 《ubuntu22.04laptop OpenCV Get Started》。 后续更多的时间需要再GPU算法上下功夫,目前…

如何在PostgreSQL中使用索引覆盖扫描提高查询性能?

文章目录 解决方案1. 创建合适的索引2. 确保查询能够使用索引覆盖扫描3. 调整查询以利用索引覆盖扫描4. 监控和调优 示例代码1. 创建索引2. 编写查询3. 检查是否使用索引覆盖扫描4. 调整索引 总结 在PostgreSQL中,索引是提高查询性能的关键工具之一。索引允许数据库…

Mybatis-plus 分页 自定义count方法

起因 使用了mybatisplus语句中有order by 语法mybatisplus会使用 select count(*) from (子语句) TOTAL 算出total但是会报错 查询条件QueryWrapper中还有order by排序条件,则生成的select count(*) from(sql) 就会报错 除非另外还指定了 TOP、OFFSET 或 FOR XML,否…

文章生成器免费版有哪些,哪个好用?

作为一个长期需要写作的人,对文章生成器自然是非常了解,如果搜文章生成器互联网上多到让人应接不暇,但小编今天要谈的是文章生成器免费版,因为看到很多写手朋友都想找一个免费的文章生成器来用,但是大家在网上搜可能很…

GITHUB的VB代码无法加载的问题解决

GITHUB里有不少好的VB代码,但是下载之后,经常出现工程加载出错的问题,例如: LOG文件为: 不能加载 0 行 0: 不能加载文件 D:\xxxx\Semi VB API Loader\frmMain.frm 。 原因其实很简单,github里的换行符是u…

巧用Stream流解决Page分页连表查询一对多展示错误的问题

1. 简介 在数据库一对多的情况下,使用Page分页查询这种Vo的时候如果直接查询会导致每页展示的条数不一致。 简单的代码如下 用户类 public class User{private Integer id; }地址类 public class UserAddress {private Integer id;private String address;private…