// main.js 傳統(tǒng)方式
import MyComponent from '@/components/MyComponent.vue'
Vue.component('MyComponent', MyComponent) // 全局注冊
// 或局部注冊
export default {
  components: { MyComponent }
}

// 自動注冊全局組件
const requireComponent = require.context(
  '@/components', // 掃描目錄
  true, // 是否遍歷子目錄
  /\.vue$/ // 匹配文件正則
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)
  // 獲取組件名（PascalCase）
  const componentName = fileName
    .split('/')
    .pop()
    .replace(/\.vue$/, '')
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .toLowerCase()
  
  // 全局注冊組件
  Vue.component(componentName, componentConfig.default || componentConfig)
})

// vite.config.js 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

// 自動注冊組件（main.js）
const modules = import.meta.glob('@/components/**/*.vue')

Object.entries(modules).forEach(([path, module]) => {
  const componentName = path
    .split('/')
    .pop()
    .replace(/\.vue$/, '')
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .toLowerCase()

  // 動態(tài)導(dǎo)入并注冊
  module().then(mod => {
    app.component(componentName, mod.default)
  })
})

// router.js 傳統(tǒng)配置
import { createRouter } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default createRouter({ routes })

// 自動生成路由配置
const requireView = require.context('@/views', true, /\.vue$/)

const routes = requireView.keys().map(fileName => {
  // 提取路由路徑（示例：/views/user/Profile.vue → /user/profile）
  const path = fileName
    .replace(/^\.\//, '')
    .replace(/\.vue$/, '')
    .replace(/([A-Z])/g, '-$1')
    .toLowerCase()

  // 動態(tài)導(dǎo)入組件
  const component = () => import(`@/views${fileName.replace(/^\.\//, '')}`)

  return {
    path: `/${path}`,
    component,
    name: path // 路由命名
  }
})

// 過濾 index.vue 作為根路由
const indexRoute = routes.find(r => r.path === '/index')
if (indexRoute) {
  indexRoute.path = '/'
}

export default createRouter({ routes })

views/
  admin/
    Dashboard.vue
    Users.vue
  user/
    Profile.vue

routes = [
  {
    path: '/admin',
    component: () => import('@/views/admin.vue'),
    children: [
      { path: 'dashboard', component: Dashboard },
      { path: 'users', component: Users }
    ]
  },
  // ...
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

// 在視圖組件中添加 meta 標(biāo)記
<script>
export default {
  meta: {
    requiresAuth: true,
    roles: ['admin']
  }
}
</script>

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => ({
        ...options,
        hotReload: true
      }))

    // 添加自動注冊插件
    config.plugin('auto-import')
      .use(require('./plugins/auto-import-plugin'))
  }
}

// vite.config.js
import AutoImport from './plugins/vite-auto-import'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      components: ['@/components/**/*.vue'],
      routes: '@/views/**/*.vue'
    })
  ]
})

// 聲明全局組件類型
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    MyComponent: typeof import('@/components/MyComponent.vue')['default']
  }
}

// 自動生成類型聲明
// 通過 tsc 或 vue-tsc 編譯時生成

// 自動注冊全局狀態(tài)
const provideState = (app) => {
  const stateModules = import.meta.glob('@/store/**/*.js')
  Object.values(stateModules).forEach(module => {
    const state = module().default
    app.provide(state.name, state)
  })
}

// 主應(yīng)用自動注冊子應(yīng)用組件
const microApps = import.meta.glob('@/micro-apps/**/*.vue')
Object.entries(microApps).forEach(([path, module]) => {
  const appName = path.split('/')[1]
  app.component(`MicroApp-${appName}`, module().default)
})