LOADING

加载过慢请开启缓存 浏览器默认开启

字节跳动Arco Design Pro快速调用指南

2024/10/27 前端

字节跳动Arco Design Pro快速调用指南

写在前面

本篇是在做横向项目的时候写的，因为不论是比赛还是做项目，基本上会搭建前端框架，而诸如Arco Design这样的开源框架突出一个简约美观又快速易上手，所以实践中我是多次用到。关于整个项目的架构介绍可能会有机会再填坑。这里主要是随着一次使用记录一下使用过程，方便自己以后的再次使用。

快速建站

项目基本结构

屏幕截图 2024-10-27 100631

以上是我截取的该项目的文件结构。其中重要内容基本都集中在/src文件夹下。

网站标题修改

首先，网站的标题是需要修改的。也就是在你的浏览器最上方标签页显示的文字。如下图所示：

屏幕截图 2024-10-27 100946

该部分的修改在最根部的index.html文件中（基础中的基础）。这里可以修改的是缩略图标和网站标题。

屏幕截图 2024-10-27 101042

<head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico">		//图标修改位置
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Arco Design Pro - 开箱即用的中台前端/设计解决方案</title>		//标题修改位置
  </head>

登录注册界面

登录注册界面的原始效果如下：

屏幕截图 2024-10-27 100312

这里“注册账号”按钮默认是没有连接超链接的。也就是说如果需要注册账号功能，需要你自己写。项目默认提供的账号和密码都是“admin”。点击登录就会进入平台首页了。

该部分修改的位置在/src/views/login文件夹下。后续绝大多数页面的修改都是在views文件夹下完成的。各子页面的位置基本也算见文知意。

这里如果你不追求对页面的布局进行修改的话，只需在/src/views/login/locale/zh-CN.ts修改显示的文字就可以了。

[!CAUTION]

左上角的“Arco Design Pro”应在/src/views/login/index.vue中修改。

[!NOTE]

如果改成汉字之后出现乱码，是编码格式的问题。在VS2022中的修改方式：文件/高级保存选项，把GB2312改成UTF-8并保存即可。

屏幕截图 2024-10-27 102952

导航栏&路由修改

导航栏的默认状态如下：

屏幕截图 2024-10-27 104147

该部分修改的位置在/src/router/routes文件夹下。

屏幕截图 2024-10-27 104541

我们以dashboard这一页面的修改方式简单介绍：

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

const DASHBOARD: AppRouteRecordRaw = {
  path: '/dashboard',
  name: 'dashboard',
  component: DEFAULT_LAYOUT,
  meta: {
    locale: 'menu.dashboard',
    requiresAuth: true,
    icon: 'icon-dashboard',				//修改缩略图标
    order: 0,						   //修改在导航栏的展示顺序，0为第一个
  },
  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'],
      },
    },
  ],
};

export default DASHBOARD;

以上是/src/router/routes/modules/dashboard.ts的代码，对应生成的是如下图所示的目录结构：

屏幕截图 2024-10-27 104727

如果需要修改缩略图标、目录结构、导航栏的排序，都可以在此修改。如果要修改显示的名称，则需要到/src/locale/zh-CN.ts文件处修改，它存储了绝大多数中文显示内容。

缩略图标的修改，可以访问图标 Icon | ArcoDesign。修改icon-后面的内容就可以了。要注意使用小写。