模块前台

框架选择

前端建议使用 vue前端脚手架 进行开发，你可以查看 vue前端脚手架 文档进行安装，当然也可以使用任何你想用的前端技术如react、angular，这是不限制的。

如果你的项目前端与后台在一台服务器， 因为网站域名要被多个模块使用，所以需要对以下文件进行配置。下面是对使用 vue前端脚手架 构建的前端项目进行的配置。

构建配置

下面是对生成的静态文件url与dist打包位置处理

• base是对生成的静态文件路径处理
• outdir生成的dist编译目录处理
• 下例中的Blog要与你的模块目录名一致

...
//静态资源URL前缀
base: isBuild ? '/addons/Blog/dist/' : '/',
build: {
  //编译文件生成目录
  outDir: '../dist',
  ...
}

路由声明

也是为了区分不同模块所以路由前要加上模块名称

后台管理

• path: '/Blog/admin' 配置项 Blog 要与你模块目录名一致

import { DashboardOne } from '@icon-park/vue-next'
import { RouteRecordRaw } from 'vue-router'
export default {
  //Blog需要替换为你的模块名
  path: '/Blog/admin',
  component: () => import('@@/layouts/admin.vue'),
  meta: { order: 1, auth: true, menu: { title: 'Dashboard', icon: DashboardOne } },
  children: [
    {
      name: 'admin',
      path: '',
      component: () => import('@/views/admin/index.vue'),
      meta: { menu: { title: '工作台' } },
    },
  ],
} as RouteRecordRaw

前台显示

• path: '/Blog/admin' 配置项 Blog 要与你模块目录名一致
• 模块首页路由你需要定义 alias:'/'

import { RouteRecordRaw } from 'vue-router'
export default {
  //Blog需要替换为你的模块名
  path: '/Blog/front',
  component: () => import('@/App.vue'),
  children: [
    {
      name: 'home',
      path: '',
      //模块是站点默认模块时，即通过域名直接访问模块时需要以下设置
      //建议保持以下设置存在
      alias: '/',
      component: () => import('@/views/front/index.vue'),
    },
  ],
} as RouteRecordRaw

如果你的模块配置文件config/config.php 中的 front为true，表示该模块可以前台访问。

你可以在src/router/front.ts 中定义以下路由，即存在 path: '/Blog'

import { RouteRecordRaw } from 'vue-router'
export default {
  name: 'front',
  path: '/Blog',
  component: () => import('@/App.vue'),
  children: [
    {
      path: '',
      name: 'home',
      component: () => import('@/views/home.vue'),
    },
  ],
} as RouteRecordRaw

vscode

开发时存在多个前端目录，我们在使用vscode开发时，使用ctrl+p会搜索很个目录中的文件，有些目录文件我们根本不关注，所以希望vscode排除这些目录的搜索。

目录说明

比如我们创建了Blog 模块，并使用 houdunren-vue 命令在模块根目录下创建了 front目录，用于完成模块的前端业务。

• 系统核心 vue
• 模块核心 addons/Blog/front/core
• 模块业务 addong/Blog/front/src

排除目录

实际上我们主要使用 addons/Blog/front/src目录，我们希望在使用 ctrl+p 搜索时只显示该目录的内容。

首先创建工作区，并将 addons/Blog 目录添加到工作区中。

然后排队 addons/Blog/vue目录