Vue 批注工具安装器

一键安装批注工具到 Vue 3 + Vite 项目。

快速开始

安装

# 使用 npx（推荐）
npx @your-scope/setup-annotator

# 或者全局安装
npm install -g @your-scope/setup-annotator
setup-annotator

使用步骤

1. 进入你的 Vue 3 + Vite 项目根目录
2. 运行安装命令
3. 根据提示完成安装
4. 启动开发服务器 npm run dev

功能特性

• ✅ 一键安装批注工具
• ✅ 自动复制必要文件
• ✅ 自动修改 vite.config.js
• ✅ 自动修改 main.js/main.ts
• ✅ 检测已安装避免重复
• ✅ 可选择添加到 .gitignore

安装内容

安装器会：

1. 复制文件

   • src/annotator.js - 批注工具核心代码
   • vite-plugin-annotator.js - Vite 文件存储插件

2. 修改配置文件

   • 在 vite.config.js 中注册插件
   • 在 src/main.js 中导入批注工具

3. 创建数据文件

   • 运行时自动生成 annotations.json

使用方式

安装完成后：

1. 启动项目：npm run dev
2. 点击右下角"批注工具"悬浮窗
3. 点击"点选"按钮
4. 选择要批注的文本
5. 输入批注内容并保存
6. 点击高亮的文本查看/编辑批注

批注功能

• 📝 添加批注：选中文本后添加批注
• ✏️ 编辑批注：点击已存在的批注进行编辑
• 🗑️ 删除批注：删除不需要的批注
• 💾 自动保存：批注自动保存到文件
• 📂 数据持久化：数据保存在 annotations.json
• 👁️ 显示/隐藏：切换批注高亮的显示状态

目录结构

安装后的项目结构：

your-project/
├── src/
│   ├── annotator.js          # 批注工具核心（新增）
│   ├── main.js               # 已修改（导入批注工具）
│   └── ...
├── vite-plugin-annotator.js  # Vite 插件（新增）
├── vite.config.js            # 已修改（注册插件）
├── annotations.json          # 批注数据（运行时生成）
└── package.json

配置选项

修改数据文件名

编辑 vite-plugin-annotator.js：

const ANNOTATIONS_FILE = 'annotations.json'; // 修改文件名

禁用批注工具

在 src/main.js 中移除或注释：

// import './annotator.js'

故障排查

批注没有保存

1. 检查 vite-plugin-annotator.js 是否存在
2. 检查 vite.config.js 中是否正确注册插件
3. 重启开发服务器
4. 查看浏览器控制台错误

批注工具没有显示

1. 检查 src/main.js 中是否导入
2. 刷新页面
3. 查看浏览器控制台错误

技术栈

• Vue 3
• Vite
• Node.js CLI

许可证

MIT