# vue3-template-plugin-pro

**Repository Path**: shallow-winds/vue3-template-plugin-pro

## Basic Information

- **Project Name**: vue3-template-plugin-pro
- **Description**: 这是一个油猴插件的案例，基于vue3+vite开发，基本上涵盖了整个流程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-14
- **Last Updated**: 2025-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Plugin Template (Vue 3 + Vite + Monkey)

这是一个基于 **Vue 3** + **Vite** + **vite-plugin-monkey** 的浏览器油猴脚本（Userscript）开发模板。

它预置了一个可拖拽、可最小化的悬浮面板，并集成了 Element Plus UI 库，帮助你快速开发功能强大的浏览器插件。

## ✨ 特性

- **⚡️ 极速开发**: 使用 Vite 构建，热更新速度飞快。
- **🧩 组件化**: 完整的 Vue 3 SFC 支持，像写 Web App 一样写脚本。
- **🎨 UI 集成**: 预装 Element Plus，开箱即用。
- **🖱 拖拽交互**: 内置悬浮窗拖拽逻辑，解决拖拽与点击冲突问题。
- **↔️ 最小化/展开**: 支持悬浮窗最小化贴边和展开显示。
- **📱 响应式适配**: 集成 `postcss-px-to-viewport`，方便处理不同屏幕尺寸。

## 🛠 技术栈

- [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Vite](https://vitejs.dev/) - 下一代前端开发与构建工具
- [Element Plus](https://element-plus.org/) - 基于 Vue 3 的组件库
- [VueUse](https://vueuse.org/) - Vue 组合式 API 工具库
- [vite-plugin-monkey](https://github.com/lisonge/vite-plugin-monkey) - Vite 插件，用于开发油猴脚本

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
# 或者
pnpm install
# 或者
yarn install
```

### 2. 启动开发服务器

```bash
npm run dev
```

启动后，控制台会输出一个本地链接。在安装了 Tampermonkey 扩展的浏览器中点击该链接，即可安装开发版本的脚本。
代码修改后，脚本会自动热更新。

### 3. 构建生产版本

```bash
npm run build
```

构建完成后，会在 `dist` 目录下生成 `.user.js` 文件，可直接发布或分发。

## 📂 项目结构

```
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # Vue 组件
│   │   └── HomeIndex.vue # 示例面板组件
│   ├── utils/           # 工具函数
│   ├── App.vue          # 根组件（处理拖拽、最小化逻辑）
│   ├── main.js          # 入口文件
│   └── style.css        # 全局样式
├── vite.config.js       # Vite 配置 (包含 Userscript 配置)
└── package.json
```

## ⚙️ 配置指南

### 修改目标网站

打开 `vite.config.js`，找到 `monkey` 插件配置部分，修改 `match` 或 `include` 字段：

```javascript
monkey({
  entry: 'src/main.js',
  userscript: {
    icon: 'https://vitejs.dev/logo.svg',
    namespace: 'npm/vite-plugin-monkey',
    include: ['*://www.baidu.com*'] // 修改为你需要注入脚本的网站
  },
}),
```

### 自定义面板内容

编辑 `src/components/HomeIndex.vue` 即可修改悬浮窗内的具体内容。

## 📝 常见问题


**Q: 如何修改悬浮窗的初始位置？**
A: 在 `App.vue` 中修改 `useDraggable` 的 `initialValue`：

```javascript
initialValue: { x: 140, y: 140 }
```