npm package: @qiu_qiu/hrl-auto-framework
Description: An automated Vue 3 framework plugin for layout system, auto routing, and global component registration
Author: Vue Auto Framework Team
Latest version: 1.0.1

# Vue Auto Framework
## 123
一个自动化的Vue 3框架插件，提供布局系统、自动路由读取和全局组件注册功能。

## 特性

- 🎨 **布局系统**: 灵活的布局管理，支持默认和自定义布局
- 🚀 **自动路由**: 自动检测和注册路由文件
- 📦 **组件注册**: 自动全局注册指定目录中的组件
- 💪 **TypeScript支持**: 完整的TypeScript支持和类型定义
- ⚡ **Vite优化**: 针对Vite构建工具优化
- 🔧 **灵活配置**: 丰富的配置选项，开箱即用

## 安装

```bash
npm install vue-auto-framework
```

### 依赖要求

- Vue 3.0+
- Vue Router 4.0+
- Node.js 16.0+

## 快速开始

### 基础用法

```typescript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import VueAutoFramework from 'vue-auto-framework'
import App from './App.vue'

const app = createApp(App)

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: []
})

app.use(router)

// 安装Vue Auto Framework插件
app.use(VueAutoFramework)

app.mount('#app')
```

### 自定义配置

```typescript
app.use(VueAutoFramework, {
  debug: true,
  layoutConfig: {
    defaultLayout: 'MyLayout',
    responsive: true
  },
  routerConfig: {
    routerFile: 'custom.router.js',
    autoRegister: true
  },
  componentConfig: {
    componentsPath: 'src/components',
    autoRegister: true,
    nameTransform: (filename) => filename.replace(/\.(vue|js|ts)$/, '')
  }
})
```

## 功能详解

### 布局系统

框架提供了灵活的布局管理系统：

```vue
<!-- 使用默认布局 -->
<template>
  <DefaultLayout>
    <template #header>
      <h1>我的应用</h1>
    </template>
    <template #sidebar>
      <nav>导航菜单</nav>
    </template>
    <template #main>
      <router-view />
    </template>
    <template #footer>
      <p>版权信息</p>
    </template>
  </DefaultLayout>
</template>
```

### 组件注册

使用Vite的`import.meta.glob`功能自动注册组件：

```typescript
// 在main.ts中
import VueAutoFramework from 'vue-auto-framework'

// 使用Vite的glob导入
const components = import.meta.glob('./src/components/**/*.vue')

app.use(VueAutoFramework)

// 注册组件
const componentRegistry = app.config.globalProperties.$vueAutoFramework.componentRegistry
const componentMap = await componentRegistry.createComponentMapFromGlob(components)
await componentRegistry.registerComponents(app, componentMap)
```

### 路由配置

创建`.router.js`文件来定义路由：

```javascript
// .router.js
export default [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue'),
    children: [
      {
        path: 'team',
        component: () => import('./views/Team.vue')
      }
    ]
  }
]
```

## API参考

### 配置选项

```typescript
interface FrameworkOptions {
  debug?: boolean                    // 启用调试模式
  layoutConfig?: LayoutConfig        // 布局配置
  routerConfig?: RouterConfig        // 路由配置
  componentConfig?: ComponentConfig  // 组件配置
}

interface LayoutConfig {
  defaultLayout?: string    // 默认布局名称
  layoutsPath?: string     // 布局文件路径
  responsive?: boolean     // 响应式支持
}

interface RouterConfig {
  routerFile?: string      // 路由文件名
  autoRegister?: boolean   // 自动注册路由
}

interface ComponentConfig {
  componentsPath?: string                           // 组件目录路径
  autoRegister?: boolean                           // 自动注册组件
  nameTransform?: (filename: string) => string     // 组件名转换函数
}
```

### 插件实例方法

```typescript
// 通过app实例访问
const framework = app.config.globalProperties.$vueAutoFramework

// 布局管理
framework.getLayout(name: string)
framework.registerLayout(name: string, layout: Component)

// 路由管理
framework.registerRoutes(routes: RouteRecordRaw[])

// 组件管理
framework.registerComponents(components: ComponentMap)
framework.createComponentMap(componentObject: Record<string, Component>)
framework.createComponentMapFromGlob(globImports: Record<string, () => Promise<any>>)
```

## 开发

### 本地开发

```bash
# 安装依赖
npm install

# 运行测试
npm test

# 监听模式运行测试
npm run test:watch

# 构建库
npm run build

# 开发模式（监听构建）
npm run dev

# 清理构建文件
npm run clean
```

### 发布

```bash
# 预发布检查
npm run publish:dry

# 发布beta版本
npm run publish:beta

# 正式发布
npm publish
```

## 兼容性

- Vue 3.0+
- Vue Router 4.0+
- 现代浏览器（支持ES2015+）
- Node.js 16.0+

## 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 贡献

欢迎提交Issue和Pull Request！

## 更新日志

### 1.0.0

- 初始版本发布
- 布局系统
- 自动路由读取
- 组件自动注册
- TypeScript支持