Arco Design Pro 配置

Litbai_zhang

已于 2023-08-31 21:38:57 修改

阅读量837

点赞数

于 2023-08-31 21:23:12 首次发布

本文链接：https://blog.youkuaiyun.com/Litbai_zhang/article/details/132611851

版权

文章指导如何将项目中的垂直菜单改为水平布局，包括修改setting.json配置项、创建新的路由模块、设置路由元数据和本地化菜单名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

垂直菜单更改为水平菜单

打开 src/config/setting.json

{
  "theme": "light",
  "colorWeak": false,
  "navbar": true,
  "menu": true,
  "topMenu": true,
  "hideMenu": false,
  "menuCollapse": false,
  "footer": true,
  "themeColor": "#165DFF",
  "menuWidth": 220,
  "globalSettings": false,
  "device": "desktop",
  "tabBar": false,
  "menuFromServer": false,
  "serverMenu": []
}


修改上述配置的topmenu选项为ture即可

增加菜单

在\src\router\routes\modules下新建文件，例如index.ts

文件内容如下

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const INDEX: AppRouteRecordRaw = {
    path: '/index',
    name: 'index',
    component: DEFAULT_LAYOUT,
    meta: {
        locale: 'menu.index',
        icon: 'icon-settings',
        requiresAuth: true,
        order: 1,
    },
};

export default INDEX;


在views/目录下新建目录index


在src\locale\en-US.ts和src\locale\zh-CN.ts中修改中英文
例如 
'menu.inex' : 'Index'
'menu.inex' : '首页'