Vue Auto Framework

123

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

特性

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

安装

npm install vue-auto-framework

依赖要求

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

快速开始

基础用法

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')

自定义配置

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)$/, '')
  }
})

功能详解

布局系统

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

<!-- 使用默认布局 -->
<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功能自动注册组件：

// 在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文件来定义路由：

// .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参考

配置选项

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     // 组件名转换函数
}

插件实例方法

// 通过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>>)

开发

本地开发

# 安装依赖
npm install

# 运行测试
npm test

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

# 构建库
npm run build

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

# 清理构建文件
npm run clean

发布

# 预发布检查
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 文件

贡献

欢迎提交Issue和Pull Request！

更新日志

1.0.0

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