six-shop/hello

hello扩展

Maintainers

Package info

gitee.com/sixdec-1/hello.git

Type:sixshop-extension

pkg:composer/six-shop/hello

Statistics

Installs: 26

Dependents: 0

Suggesters: 0

Security

Advisories: 0

Aikido package health analysis

v1.0.1 2025-12-13 14:18 UTC

Requires

MIT 9718c935b28850eb342f246db3c3ddab53033866

  • hui he <runphp.woop@qq.com>

thinkphpsixshop

This package is auto-updated.

Last update: 2026-03-28 01:26:53 UTC

README

这是一个完整的示例模块，展示如何在 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/indexIndex.vue首页展示
HelloAbout/hello/aboutAbout.vue关于页面
HelloDemo/hello/demoDemo.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 目录下

📚 更多信息

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