Quellcode durchsuchen

fix: 修改注解

jcq vor 1 Monat
Ursprung
Commit
b7562d2258
3 geänderte Dateien mit 78 neuen und 5 gelöschten Zeilen
  1. 4 1
      .npmignore
  2. 31 4
      README.md
  3. 43 0
      demo-utm-react/README.md

+ 4 - 1
.npmignore

@@ -1 +1,4 @@
-src/ 
+src/ 
+demo-utm-vue/
+demo-utm-react/
+demo-utm-vue3/

+ 31 - 4
README.md

@@ -8,7 +8,7 @@
 npm install utm-params-extractor-test
 ```
 
-##### 2. 在项目中使用
+##### 2. 在 React 项目中使用
 
 ```javascript
 // ES6 模块
@@ -16,13 +16,13 @@ import UtmTracker from 'utm-params-extractor-test';
 
 // 方法1:使用静态方法直接获取
 const utmParams = UtmTracker.get();
-console.log('UTM参数:', utmParams);
+console.log('UTM参数:', utmParams); // 控制台输出所有 UTM 及浏览器参数
 
 // 方法2:实例化后获取(适合扩展)
 const tracker = new UtmTracker();
 const params = tracker.getParams();
 
-// 自行处理数据(例如发送到后端)
+// 你可以将参数发送到后端进行统计分析
 fetch('https://your-api.com/track', {
   method: 'POST',
   headers: {
@@ -35,7 +35,34 @@ fetch('https://your-api.com/track', {
 .catch(error => console.error('发送失败:', error));
 ```
 
-##### 3. 在 HTML 中直接使用
+##### 3. 在 Vue 项目中使用
+
+```vue
+<template>
+  <div>
+    <pre>{{ utmJson }}</pre>
+  </div>
+</template>
+
+<script>
+import UtmTracker from 'utm-params-extractor-test';
+export default {
+  data() {
+    return { utm: null };
+  },
+  computed: {
+    utmJson() {
+      return this.utm ? JSON.stringify(this.utm, null, 2) : '正在获取...';
+    }
+  },
+  mounted() {
+    this.utm = UtmTracker.get();
+  }
+};
+</script>
+```
+
+##### 4. 在 HTML 中直接使用
 
 ```html
 <script src="dist/main.js"></script>

+ 43 - 0
demo-utm-react/README.md

@@ -1,3 +1,46 @@
+# 使用 Create React App 快速开始
+
+本项目基于 [Create React App](https://github.com/facebook/create-react-app) 脚手架创建。
+
+## 可用脚本
+
+在项目目录下,你可以运行:
+
+### `npm start`
+
+以开发模式运行应用。\
+打开 [http://localhost:3000](http://localhost:3000) 在浏览器中查看。
+
+当你修改代码后,页面会自动刷新。\
+你也会在控制台看到任何 lint 错误。
+
+### `npm test`
+
+以交互式监视模式启动测试运行器。\
+更多信息请参见 [运行测试](https://facebook.github.io/create-react-app/docs/running-tests) 章节。
+
+### `npm run build`
+
+将应用打包到 `build` 文件夹。\
+会以生产模式正确打包 React,并优化构建以获得最佳性能。
+
+构建后的文件会被压缩,文件名包含哈希值。\
+你的应用可以直接部署!
+
+更多部署信息请参见 [部署](https://facebook.github.io/create-react-app/docs/deployment) 章节。
+
+### `npm run eject`
+
+**注意:此操作不可逆。一旦 `eject`,无法恢复!**
+
+如果你对构建工具和配置不满意,可以随时运行 `eject`。该命令会将所有配置文件和依赖(如 webpack、Babel、ESLint 等)复制到你的项目中,方便你完全自定义。除了 `eject` 以外的所有命令依然可用,但会指向你复制出来的脚本。此时你需要自行维护这些配置。
+
+你可以永远不使用 `eject`。默认配置适合大多数中小型项目,无需强制自定义。
+
+## 了解更多
+
+你可以在 [Create React App 官方文档](https://facebook.github.io/create-react-app/docs/getting-started) 中了解更多内容。
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).