vue-cli-plugin-event-tracker

This is a Vue CLI plugin that adds a custom attribute to elements with event listeners to track events.

Installation

To install this plugin, run the following command:

npm install vue-cli-plugin-event-tracker -D

Usage

To use this plugin, add it to your Vue CLI configuration:

module.exports = {
  pluginOptions: {
    eventTracker: {
      enabled: true,
      idPrefix: 'r-',
      attributeName: 'data-r-id'
    }
  }
}

原理

这个插件的原理是修改 Vue 的编译器，在编译时为每个带有事件监听器的元素添加一个自定义属性，以便在运行时进行跟踪。

具体实现

1. 在 Vue 编译器中添加一个模块，用于在编译时处理带有事件监听器的元素。
2. 为每个带有事件监听器的元素生成一个唯一的 ID，并将其添加为自定义属性。
3. 在运行时，通过读取自定义属性来跟踪事件。

注意事项

1. 这个插件只适用于 vue-cli 5.x。
2. 这个插件不会修改 Vue 的运行时行为，只会影响编译器。
3. 这个插件不会影响 Vue 的性能，因为它是通过自定义属性来跟踪事件的。

支持的组件类型及收集的数据

button

• tagName: button
• label: 按钮的文本内容
• events: [click, mouseover, mouseout]

input

• tagName: input
• label: 输入框的标签
• events: [input, change, focus, blur]
• value: 输入框的值

select

• tagName: select
• label: 选择框的标签
• events: [change, focus, blur]
• value: 选择框的值
• options: 选择框的选项

checkbox

• tagName: checkbox
• label: 复选框的标签
• events: [change, focus, blur]
• value: 复选框的值
• checked: 复选框是否被选中

radio

• tagName: radio
• label: 单选框的标签
• events: [change, focus, blur]
• value: 单选框的值
• checked: 单选框是否被选中

textarea

• tagName: textarea
• label: 文本区域的标签
• events: [input, change, focus, blur]
• value: 文本区域的值

promot

我在使用一个 vue-cli 创建的 vue2 项目，我需要在编译 vue 文件的时候，给任何通过 @ 、 v-on 和 addEventListener 绑定了事件的元素或者组件添加一个唯一标识，该唯一标识不要依赖于 uuid，而且如果元素没有变化，则ID在每次编译都保持不变。将该ID 保存在 data-r-id 属性。将该功能封装为一个vue-cli 插件，并添加必要的调试信息。（注意：可能需要明确指定data-r-id不是动态属性。）