# `ArcoAdmin` 使用文档

ArcoAdmin 是基于 Vue3 + ES2015+ + TypeScript + Arco Design + Echarts 而搭建的后台管理界面

# 快速上手

# 目录结构

|-- Vue
    |-- .env.development # 测试环境配置
    |-- .env.production # 正式环境配置
    |-- components.d.ts
    |-- index.html
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json # TS 配置
    |-- config # 配置文件
    |-- src
        |-- App.vue # 视图入口
        |-- env.d.ts
        |-- main.ts # 入口文件
        |-- api # 请求接口
        |-- assets # 静态资源
        |-- components # 通用业务组件
        |-- config # 全局配置(包含echarts主题)
        |-- directive # 指令集
        |-- hooks # 全局hooks
        |-- layout # 布局
        |-- locale # 国际化语言包
        |-- mock # 模拟数据
        |-- router # 路由配置
        |-- store # 状态管理中心
        |-- types # Typescript 类型
        |-- utils # 工具库
        |-- views # 页面模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 初始化项目

清除 /src/router/routes/modules 除了 login.ts 之外的 其他文件
清除 /src/views 除了 login 和 not-found 之外的 其他文件夹

修改本地语言包 /src/locale/index.ts

import { createI18n } from 'vue-i18n';
import cn from './zh-CN';

export const LOCALE_OPTIONS = [{ label: '中文', value: 'zh-CN' }];

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'zh-CN',
  allowComposition: true,
  messages: {
    'zh-CN': cn,
  },
});

export default i18n;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改本地路由语言包 /src/locale/zh-CN.ts

import localeMessageBox from '@/components/message-box/locale/zh-CN';
import localeLogin from '@/views/login/locale/zh-CN';
import localeSettings from './zh-CN/settings';

export default {
  'menu.dashboard': '仪表盘',
  'menu.list': '列表页',
  'menu.result': '结果页',
  'menu.exception': '异常页',
  'menu.form': '表单页',
  'menu.profile': '详情页',
  'menu.visualization': '数据可视化',
  'menu.user': '个人中心',
  'navbar.docs': '文档中心',
  ...localeSettings,
  ...localeMessageBox,
  ...localeLogin,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

修改本地模拟数据文件 /src/mock/index.ts

import Mock from 'mockjs';

import './user';
import './message-box';

Mock.setup({
  timeout: '600-1000',
});

1
2
3
4
5
6
7
8

经过项目初始化后目前只剩下登录路由所以开始 自定义管理台的路由和菜单

# 路由和菜单

在 /src/views 创建对应的页面文件

  |-- src
      |-- views
+         |-- dashboard
+         |   |-- index.vue
+         |   |-- locale
+         |   |   |-- zh-CN.ts
+         |   |-- workplace
+         |       |-- index.vue
+         |   |-- monitor
+         |       |-- index.vue
          |-- login
          |-- not-found

1
2
3
4
5
6
7
8
9
10
11
12

创建对应的路由文件 /src/router/routes/modules/dashboard.ts

export default {
  path: 'dashboard',
  name: 'dashboard',
  component: () => import('@/views/dashboard/index.vue'),
  meta: {
    locale: 'menu.dashboard', // 一级菜单名（语言包键名）
    requiresAuth: true, // 是否需要鉴权
    icon: 'icon-dashboard', // 菜单配置icon
  },
  children: [
    {
      path: 'workplace',
      name: 'workplace',
      component: () => import('@/views/dashboard/workplace/index.vue'),
      meta: {
        locale: 'menu.dashboard.workplace', // 二级菜单名（语言包键名）
        requiresAuth: true, // 是否需要鉴权
        roles: ['*'], // 权限角色
      },
    },
    {
      path: 'monitor',
      name: 'monitor',
      component: () => import('@/views/dashboard/monitor/index.vue'),
      meta: {
        locale: 'menu.dashboard.monitor',
        requiresAuth: true,
        roles: ['admin'],
      },
    },
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

配置语言包 /src/locale/zh-CN.ts

  import localeMessageBox from '@/components/message-box/locale/zh-CN';
  import localeLogin from '@/views/login/locale/zh-CN';
  import localeSettings from './zh-CN/settings';

  export default {
    'menu.dashboard': '仪表盘',
    'menu.list': '列表页',
    'menu.result': '结果页',
    'menu.exception': '异常页',
    'menu.form': '表单页',
    'menu.profile': '详情页',
    'menu.visualization': '数据可视化',
    'menu.user': '个人中心',
+   'menu.dashboard.workplace': '工作平台',
+   'menu.dashboard.monitor': '监控器',
    'navbar.docs': '文档中心',
    ...localeSettings,
    ...localeMessageBox,
    ...localeLogin,
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 配置语言包

页面使用语言包 /src/views/dashboard/workplace/index.vue

<template>
  <div id="workplace">
    <h1>workplace</h1>
    <h2>{{ $t('dashboard.workplace.h2Content') }}</h2>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped></style>

1
2
3
4
5
6
7
8
9
10

页面配置语言包 /src/views/dashboard/locale/zh-CN.ts

export default {
  'dashboard.workplace.h2Content': '工作台内容',
};

1
2
3

全局引入页面语言包 /src/locale

  import localeMessageBox from '@/components/message-box/locale/zh-CN';
  import localeLogin from '@/views/login/locale/zh-CN';
+ import localeDashboard from '@/views/dashboard/locale/zh-CN';
  import localeSettings from './zh-CN/settings';

  export default {
    'menu.dashboard': '仪表盘',
    'menu.list': '列表页',
    'menu.result': '结果页',
    'menu.exception': '异常页',
    'menu.form': '表单页',
    'menu.profile': '详情页',
    'menu.visualization': '数据可视化',
    'menu.user': '个人中心',
    'menu.dashboard.workplace': '工作平台',
    'menu.dashboard.monitor': '监控器',
    'navbar.docs': '文档中心',
    ...localeSettings,
    ...localeMessageBox,
    ...localeLogin,
+   ...localeDashboard,
  };