fantastic-admin后台开发

准备工作

官方文档：https://hooray.gitee.io/fantastic-admin/guide/ready.html

教程使用的框架说明：node.js 18 pnpm vite Vue 3 Vue Router 4 Pinia Element Plus

下载框架最新源码：

• 专业版：https://github.com/fantastic-admin/pro/releases
• 基础版：https://github.com/hooray/fantastic-admin/releases

1. 解压源码包并打开项目
2. pnpm install
3. pnpm run dev

项目配置

src/settings.ts

// ...
const globalSettings: Settings.all = {
  menu: {
    // 开启顶部导航
    menuMode: 'head',
  },
}
// ...

创建页面

1. 创建页面：src/views/user/userList.vue src/views/user/userDetail.vue
2. 创建路由：src/router/modules/user.ts
3. 导入路由: src/router/routes.ts

userList.vue | userDetail.vue

<script setup>

</script>

<template>
  <div>
    用户列表
  </div>
</template>

<style lang="scss" scope>

</style>

router/modules/user.ts

import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw = {
  path: '/user',
  component: () => import('@/layouts/index.vue'),
  redirect: '/user/list',
  name: '用户',
  meta: {
    title: '用户',
    icon: 'ep:user',
  },
  children: [
    {
      path: 'list',
      name: '用户列表',
      component: () => import('@/views/user/userList.vue'),
      meta: {
        title: '用户列表',
      },
    },
    {
      path: 'detail',
      name: '用户详情',
      component: () => import('@/views/user/userDetail.vue'),
      meta: {
        title: '用户详情',
        sidebar: false,
        activeMenu: '/user/list',
      },
    },
  ],

}

export default routes

router/routes.ts

// ...
import user from './modules/user'
// 动态路由（异步路由、导航栏路由）
const asyncRoutes: Route.recordMainRaw[] = [
  {
    //...
    children: [
      // ...
      user,
    ],
  },
]
// ...