@uni-hub/modern-vue-plugin

现代化 Vue 插件

🚀 技术栈

• 前端框架: Vue 3 + Composition API
• 构建工具: Vite 5
• 类型系统: TypeScript
• 样式: 原生 CSS + 现代设计
• 后端: Python 3

🛠️ 开发流程

1. 安装依赖

cd examples/modern-vue-plugin
npm install

2. 开发模式

npm run dev

这会启动 Vite 开发服务器，支持热更新。

3. 构建生产版本

npm run build

构建后的文件会输出到 dist/ 目录，所有资源都会内联到单个 HTML 文件中。

4. 打包插件

npm run package

或者直接运行：

./package.sh

🎯 功能特色

编码/解码

• Base64 编码/解码
• URL 编码/解码

加密/解密

• 凯撒密码（可调整偏移量）
• ROT13 加密
• 反转加密
• MD5 哈希
• SHA256 哈希

数据压缩

• Gzip 压缩
• Zlib 压缩
• 简单行程编码

用户体验

• 响应式设计
• 实时结果显示
• 执行历史记录
• 一键复制结果
• 加载状态指示

📦 构建原理

Vite 配置关键点

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 将所有资源内联到 HTML 中
        inlineDynamicImports: true,
        manualChunks: undefined
      }
    }
  }
})

打包流程

• 开发: npm run dev → Vite 开发服务器
• 构建: npm run build → 生成 dist/index.html（所有资源内联）
• 打包: ./package.sh → 创建插件 ZIP 包

与 CDN 方式对比

方式	CDN 引入	现代构建
依赖管理	手动管理版本	npm/pnpm 自动管理
类型支持	无	完整 TypeScript 支持
组件化	全局组件	模块化组件
构建优化	无	Tree-shaking, 压缩
开发体验	基础	热更新, 错误提示
文件大小	多个文件	单个优化文件

🔧 自定义开发

添加新功能

• 在 src/App.vue 中添加新的 TaskCard
• 在 backend/main.py 中添加对应的处理函数
• 更新类型定义 src/types/plugin.ts

样式定制

• 修改 src/App.vue 中的 CSS
• 支持 CSS 变量和现代特性
• 响应式设计

构建定制

• 修改 vite.config.ts
• 支持插件、别名、环境变量等

🎉 优势总结

✅ 现代开发体验: TypeScript + 热更新
✅ 组件化架构: 可维护性强
✅ 类型安全: 编译时错误检查
✅ 构建优化: 自动压缩和优化
✅ 单文件输出: 便于插件分发
✅ 开发工具: Vue DevTools 支持