# 引导组件生成
**Repository Path**: cqh2003/guide-component-generation
## Basic Information
- **Project Name**: 引导组件生成
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Vue引导组件生成器
> 专业的Vue2/Vue3引导组件生成器，专为本地开发环境设计，支持开发服务器连接和元素选择，快速生成高质量的用户引导组件
## 🌟 特性
- **🌐 开发服务器连接** - 支持本地开发服务器连接
- **🎯 元素选择** - 双重元素选择模式（手动输入 + 点击选择）
- **📝 Vue组件生成** - 基于模板生成完整的Vue2/Vue3单文件组件
- **🎨 多样显示** - 弹窗、提示框、内联等显示方式
- **✨ 丰富样式** - 边框、背景、动画等高亮效果配置
- **⚡ 实时预览** - 即时查看引导效果和多设备预览
- **🚀 一键导出** - 生成可复用的完整Vue组件代码
## 🚀 快速开始
### 安装依赖
```bash
npm install
```
### 启动开发服务器
```bash
npm run dev
```
### 构建生产版本
```bash
npm run build
```
## 📖 使用流程
1. **导入本地目标页面** - 通过本地开发服务器连接导入
2. **选择引导元素** - 使用手动输入或点击选择方式
3. **配置引导内容** - 设置标题、内容和操作按钮
4. **设置显示方式** - 选择弹窗、提示框或内联
5. **配置样式效果** - 设置高亮边框、背景、动画效果
6. **生成Vue组件** - 基于模板生成完整的Vue2/Vue3单文件组件
7. **预览效果并导出使用**
## 🔧 本地开发环境配置
### 域名配置
由于Vue引导组件生成器仅支持本地开发环境，您需要配置本地域名解析来访问相关服务器：
- **app.dev.local** - 本服务器运行域名
- **target.dev.local** - 目标服务器域名（您要导入的页面）
#### Windows 系统
1. 以管理员身份打开记事本
2. 编辑 `C:\Windows\System32\drivers\etc\hosts` 文件
3. 在文件末尾添加：`127.0.0.1 app.dev.local` 和 `127.0.0.1 target.dev.local`
4. 保存文件（需要管理员权限）
#### macOS/Linux 系统
1. 打开终端
2. 执行命令：`sudo nano /etc/hosts`
3. 在文件末尾添加：`127.0.0.1 app.dev.local` 和 `127.0.0.1 target.dev.local`
4. 按 Ctrl+X，然后按 Y 确认保存
### 目标服务器配置
配置您的目标服务器使用 target.dev.local 域名（您要导入页面的服务器）：
#### Vite 配置
```javascript
// vite.config.js
export default {
server: {
host: 'target.dev.local',
port: 3000,
cors: true, // 启用 CORS
allowedHosts: ['target.dev.local', 'app.dev.local'],
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Requested-With, X-Dev-Proxy',
'Cross-Origin-Embedder-Policy': 'unsafe-none',
'Cross-Origin-Opener-Policy': 'unsafe-none'
}
},
}
```
#### Webpack 配置
```javascript
// webpack.config.js
module.exports = {
devServer: {
host: 'target.dev.local',
port: 3000,
disableHostCheck: true, // 允许所有主机访问
allowedHosts: ['target.dev.local', 'app.dev.local'],
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Requested-With, X-Dev-Proxy',
'Cross-Origin-Embedder-Policy': 'unsafe-none',
'Cross-Origin-Opener-Policy': 'unsafe-none'
}
},
}
```
#### Vue CLI 配置
```javascript
// vue.config.js
module.exports = {
devServer: {
host: 'target.dev.local',
port: 3000,
disableHostCheck: true, // 允许所有主机访问
allowedHosts: ['target.dev.local', 'app.dev.local'],
// 添加 CORS 中间件（兼容旧版本 webpack）
before: function(app) {
app.use(function(req, res, next) {
// 设置 CORS 头
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, X-Dev-Proxy');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Cross-Origin-Embedder-Policy', 'unsafe-none');
res.header('Cross-Origin-Opener-Policy', 'unsafe-none');
// 处理预检请求
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
},
},
}
```
### 跨域配置要求
为了确保Vue引导组件生成器能够正常访问目标服务器，您需要在目标服务器的HTML文件中添加以下脚本：
```html
目标页面
```
### 目标系统要求
**必需配置：**
- 🌐 服务运行在 `target.dev.local` 域名
- 🚪 端口通常为 80（HTTP）或 443（HTTPS）
- 📡 服务允许跨域请求（CORS）
- 🔒 无需身份验证或可绕过验证
**推荐配置：**
- ⚡ 启用 HTTPS（推荐）
- 🔄 启用热重载功能
- 📱 响应式设计支持
- 🎯 稳定的元素选择器
## 🎯 元素选择
### 手动输入模式
直接输入CSS选择器来精确定位目标元素：
```css
.btn-primary /* 类选择器 */
#submit-btn /* ID选择器 */
button[type="submit"] /* 属性选择器 */
.nav-item > a /* 组合选择器 */
```
### 点击选择模式
在页面预览区域直接点击目标元素，系统自动生成对应的CSS选择器。
## 🎨 显示方式
- **弹窗显示** - 模态弹窗形式，居中显示引导内容
- **提示框显示** - 轻量级提示框，贴近目标元素显示
- **内联显示** - 在目标元素附近内联显示引导信息
## 💻 技术栈
- **Vue 2/3** - 渐进式JavaScript框架
- **TypeScript** - JavaScript的超集
- **Ant Design Vue** - 企业级UI设计语言
- **Element UI** - Vue 2桌面端UI组件库
- **Vite** - 下一代前端构建工具
- **Pinia** - Vue的状态管理库
## 📦 生成的组件特性
- 📦 完整的Vue2/Vue3单文件组件(.vue)
- 🎨 集成所有样式和动画效果
- 📱 响应式设计，支持移动端
- ⚡ 轻量级，无外部依赖
- 🔧 可配置的引导参数
- 🎯 精确的元素定位
- 🛠️ 支持Vue2+Element UI和Vue3+Ant Design Vue
## 🤝 贡献
欢迎提交 Issue 和 Pull Request！
## 📄 许可证
MIT License
---
© 2024 Vue引导组件生成器 - 让用户引导更简单