hello

Hello Module - 示例扩展模块

这是一个完整的示例模块，展示如何在 CyShop 电商系统中实现前端模块化开发。

📦 模块结构

hello/
├── frontend/
│   └── admin/
│       ├── index.js              # 模块配置入口（必需）
│       └── views/                # Vue 组件目录
│           ├── Index.vue         # 首页
│           ├── About.vue         # 关于页
│           └── Demo.vue          # 演示页（带 keep-alive）
├── src/                          # 后端代码（PHP）
├── route/                        # 后端路由定义
└── composer.json                 # Composer 配置

🚀 功能特性

• ✅ 自动路由注册
• ✅ 菜单自动加载
• ✅ 权限控制支持
• ✅ 页面缓存支持 (keepAlive)
• ✅ 热更新支持
• ✅ Element Plus 完整集成

📝 路由说明

路由名称	路径	组件	说明
HelloIndex	/hello/index	Index.vue	首页展示
HelloAbout	/hello/about	About.vue	关于页面
HelloDemo	/hello/demo	Demo.vue	功能演示（带缓存）

🎯 如何使用

1. 启动开发服务器

cd frontend/admin
npm run dev

2. 访问 Hello 模块

登录后，在左侧菜单中找到 "Hello 示例"，点击进入即可查看效果。

3. 查看控制台输出

打开浏览器开发者工具，会看到类似输出：

🔌 已加载扩展模块：1 个路由，1 个菜单

💡 代码示例

index.js 配置

export default {
  routes: {
    path: '/hello',
    name: 'HelloModule',
    component: () => import('@/layout/index.vue'),
    meta: {
      title: 'Hello 示例',
      icon: 'Sunny',
      permission: 'hello',
      priority: 50
    },
    children: [
      {
        path: 'index',
        name: 'HelloIndex',
        component: () => import('./views/Index.vue'),
        meta: {
          title: '你好世界',
          icon: 'Home'
        }
      }
    ]
  },
  menus: [...]
}

Vue 组件示例

<template>
  <div class="my-component">
    <el-card>
      <h1>我的组件</h1>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
</script>

🔧 开发技巧

使用主应用的组件

import Layout from '@/layout/index.vue'
import SearchForm from '@/components/SearchForm.vue'

使用 Element Plus

import { ElMessage, ElTable } from 'element-plus'
import { Setting, Document } from '@element-plus/icons-vue'

路由跳转

// 在模板中
$router.push('/other-path')

// 或在 script 中
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/other-path')

⚠️ 注意事项

1. 路由命名: 使用唯一前缀，避免与其他模块冲突
2. 权限控制: 通过 permission 字段控制访问
3. 文件位置: 必须放在 frontend/admin/ 目录下
4. 导出格式: 必须使用 export default 导出配置对象
5. 模组目录: 只能放在 six-shop 或 sixdec 目录下

📚 更多信息

• 模块化开发指南
• Vue Router 文档
• Element Plus 文档
• ThinkPHP 8 文档

---

这是一个示例模块，用于演示模块化开发的最佳实践