@qiu_qiu/my-vue-framework

一个基于 Vue 3 和 Element Plus 的框架，提供自动图标注册和布局管理功能。

特性

• 🚀 自动图标注册：自动将 SVG 文件注册为全局 Vue 组件
• 🎨 Element Plus 风格：图标使用方式与 Element Plus 完全一致
• 📱 响应式布局：内置响应式布局组件
• 🔧 TypeScript 支持：完整的 TypeScript 类型定义
• ⚡ Vite 优化：基于 Vite 构建，开发体验极佳

安装

npm install @qiu_qiu/my-vue-framework

快速开始

1. 基本使用

import { createFramework } from '@qiu_qiu/my-vue-framework'
import '@qiu_qiu/my-vue-framework/dist/my-vue-framework.css'

const { app, mount } = createFramework({
  title: '我的应用',
  theme: 'default',
})

mount('#app')

2. 图标系统

将 SVG 文件放入 src/assets/icon/ 目录，框架会自动注册为全局组件：

<template>
  <div>
    <!-- 使用方式与 Element Plus 图标完全一致 -->
    <el-icon size="32" color="blue">
      <YourIcon />
    </el-icon>
  </div>
</template>

命名规则：

• dashboard.svg → <Dashboard />
• user-profile.svg → <UserProfile />

3. 配置选项

interface FrameworkOptions {
  title?: string // 应用标题
  logo?: string // Logo 路径
  menus?: any[] // 菜单配置
  theme?: string // 主题
  slots?: {
    // 自定义插槽
    header?: any
    sidebar?: any
    footer?: any
  }
  beforeMount?: (app: App) => void // 挂载前钩子
}

单独使用图标系统

如果只需要图标功能：

import { IconInstaller } from '@qiu_qiu/my-vue-framework'

const app = createApp(App)
app.use(IconInstaller)

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build-lib

# 类型检查
npm run type-check

依赖要求

• Vue 3.0+
• Element Plus 2.0+

许可证

MIT

更新日志

0.0.1

• 初始版本
• 自动图标注册功能
• Element Plus 集成
• TypeScript 支持